Skip to main content

Tailwnd components

1 Overlaying cards​

    <div class="flex h-screen items-center justify-center">
      <div class="relative w-[350px]">
        <div class="relative flex h-[190px] w-full max-w-[320px] justify-center  rounded-[20px] border border-white z-10 bg-[#0179FE] shadow-lg backdrop-blur-[6px] ">Box1</div>

        <div class=" right-0 top-8  w-[90%] absolute flex h-[190px]  justify-center  rounded-[20px] border border-white z-0 bg-[#0179FE] shadow-lg backdrop-blur-[6px] ">Box 2</div>
      </div>
    </div>

alt text

2 glassmorphism​

.glassmorphism {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.glassmorphism2 {
  background: rgba(18, 17, 17, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
<div class="h-screen flex justify-center items-center bg-black">
  <div class="size-80 bg-[#2eb2ff] flex justify-center items-center  rounded-[20px]">
    <h1 class="glassmorphism size-12 flex justify-center items-center rounded-[13px] font-bold text-2xl text-white">
     +
    </h1>
  </div>
</div>

alt text