Animated bento box.

A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

This tailwind example is contributed by Coastal UI, on 11-Mar-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Front page

Hero Hover Other Landing Page

Author Coastal UI

Tailwind v3.4 2k 5

Fork Fullscreen

<div class="w-[300px] h-[300px] cursor-pointer group bg-gradient-to-br from-zinc-200 to-zinc-300 transition-all duration-1000 flex flex-col relative overflow-hidden group">
  <div class="grow m-4 flex items-center justify-center -mb-4 px-3">
      <div class="h-14 w-14 rounded-full flex items-center justify-center border border-zinc-400 group-hover:bg-[#ff3e00]/30 transition duration-300 relative">
          <svg class="h-6 w-6 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
              <path fill="#ff3e00" d="M110.43 16.936C98.553-.076 75.09-5.118 58.13 5.696l-29.792 19a34.2 34.2 0 0 0-15.48 22.897a25.478 30.64 0 0 0-.572 6.396a36.15 36.15 0 0 0 4.163 16.73A34.4 34.4 0 0 0 11.34 83.5a25.348 30.483 0 0 0 .345 14.412a36.5 36.5 0 0 0 5.9 13.152c11.878 17.01 35.394 22.053 52.3 11.24l29.762-19.001a34.13 34.13 0 0 0 15.438-22.918a35.5 35.5 0 0 0 .572-6.386a36.2 36.2 0 0 0-4.112-16.71a34.4 34.4 0 0 0 5.112-12.77c.369-2.11.557-4.245.562-6.386a36.4 36.4 0 0 0-6.787-21.178z" />
              <path fill="#ffffff" d="M55.219 112.662a28.463 34.23 0 0 1-5.954.76a23.64 23.64 0 0 1-19.435-10.187a21.9 21.9 0 0 1-4.08-12.74a15.658 18.83 0 0 1 .333-3.833a15.425 18.55 0 0 1 .72-2.782l.561-1.708l1.52 1.156a38.7 38.7 0 0 0 11.658 5.834l1.104.333l-.104 1.104v.573a6.63 6.63 0 0 0 1.228 3.854a7.1 7.1 0 0 0 2.538 2.288a8.262 9.936 0 0 0 3.312.837a8.251 9.923 0 0 0 1.79-.229a7.272 8.745 0 0 0 1.833-.802l29.76-19.094a6.26 6.26 0 0 0 2.904-5.302a6.62 6.62 0 0 0-1.26-3.844a7.14 7.14 0 0 0-2.553-2.252a8.313 9.997 0 0 0-3.307-.81a8.246 9.917 0 0 0-1.79.23a6.938 8.344 0 0 0-1.822.801l-11.346 7.25a24.376 29.314 0 0 1-6.048 2.656a23.64 23.64 0 0 1-25.39-9.416a21.94 21.94 0 0 1-4.08-12.74c.002-1.285.114-2.567.333-3.833a20.65 20.65 0 0 1 9.286-13.781l29.792-18.99a21.9 21.9 0 0 1 6.048-2.667a24 24 0 0 1 5.954-.75A23.68 23.68 0 0 1 98.22 24.745a21.94 21.94 0 0 1 4.029 12.75a15.748 18.939 0 0 1-.334 3.844a15.407 18.529 0 0 1-.718 2.781l-.562 1.708l-1.52-1.114a38.4 38.4 0 0 0-11.658-5.834l-1.104-.343l.104-1.105v-.572a6.7 6.7 0 0 0-1.228-3.865a7.1 7.1 0 0 0-2.55-2.25a8.309 9.992 0 0 0-3.3-.813a8.221 9.887 0 0 0-1.77.271a6.819 8.2 0 0 0-1.831.802l-29.793 18.99a5.88 7.071 0 0 0-1.836 1.79a4.75 5.713 0 0 0-.963 2.377a5.037 6.057 0 0 0-.136 1.104a6.62 6.62 0 0 0 1.228 3.844a7.1 7.1 0 0 0 2.549 2.25a8.299 9.98 0 0 0 3.301.812a8.247 9.918 0 0 0 1.79-.23a6.943 8.35 0 0 0 1.833-.801l11.367-7.292a24.218 29.125 0 0 1 6.048-2.656a28.526 34.305 0 0 1 5.954-.76A23.66 23.66 0 0 1 96.566 60.61a21.94 21.94 0 0 1 3.737 16.614a20.6 20.6 0 0 1-9.286 13.781l-29.74 18.99a24.308 29.233 0 0 1-6.057 2.667z" />
          </svg>
          <div class="absolute top-14 text-[10px] font-medium tracking-tight opacity-0 group-hover:opacity-100 duration-300 group-hover:translate-y-1 transition-all">
              Svelte 5
          </div>
      </div>
      <div class="h-[1px] grow bg-zinc-400"></div>
      <div class="h-14 w-14 rounded-full flex items-center justify-center border border-zinc-400 group-hover:bg-green-500/30 transition duration-300 relative delay-75">
          <svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="currentColor" d="M3.084 15.25c-1.664 0-2.6-1.912-1.58-3.226L10.21.806C10.794.054 12 .466 12 1.42v7.33h8.916c1.663 0 2.6 1.912 1.58 3.226L13.79 23.194c-.584.752-1.79.34-1.79-.613V15.25z" />
          </svg>
          <div class="absolute top-14 text-[10px] font-medium tracking-tight opacity-0 group-hover:opacity-100 duration-300 group-hover:translate-y-1 transition-all delay-75">
              Supabase
          </div>
      </div>
      <div class="h-[1px] grow bg-zinc-400"></div>
      <div class="h-14 w-14 rounded-full flex items-center justify-center border border-zinc-400 group-hover:bg-black/20 transition duration-300 relative delay-150">
          <svg class="h-6 w-6 mb-[2px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path fill="currentColor" d="M23 21.648H1L12 2.352z" />
          </svg>
          <div class="absolute top-14 text-[10px] font-medium tracking-tight opacity-0 group-hover:opacity-100 duration-300 group-hover:translate-y-1 transition-all delay-150">
              Vercel
          </div>
      </div>
      
  </div>
  <div class="flex flex-col justify-between items-end mt-auto p-4 pt-0 text-black">
      <div class="h-4 w-full">
      </div>
      <div class="flex justify-between items-end mt-auto pt-0 text-black">
          <div class="tracking-tight flex flex-col">
              Industry leading tech stack
              <div class="text-sm -pb-[3px] pr-3 pt-[2px] text-zinc-700 font-medium h-0 opacity-0 group-hover:h-10 group-hover:opacity-100 transition-all duration-300">
                  We use SvelteKit, Supabase and Vercel, the best stack on the market.
              </div>
          </div>
          <div class="p-[3px] shrink-0 rounded-full border bg-zinc-100/20 border-black/30">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                  <path d="M5 12h14"></path>
                  <path d="m12 5 7 7-7 7"></path>
              </svg>
          </div>
      </div>
  </div>
</div>

Related Examples

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Popover
basic popover example

Dipti narayan

3 years ago

13.7k
Background image section

Marc

2 years ago

7.3k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.6k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Coastal UI

1 year ago

2.4k