Home
Coastal UI
Animated bento box.

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 CSS v3. It is responsive. similar terms for this example is Front page

Hero Hover Other Landing Page

Author Coastal UI

338

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

Author:
Brandon D

2 years ago

17.8k
Popover
basic popover example

Author:
Dipti narayan

1 year ago

11.6k
Background image section

Author:
Marc

1 year ago

5.2k
Hero

Author:
Aman kumar

1 year ago

5.5k
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6k
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

Author:
Amit Pachange

11 months ago

10.3k
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

Author:
Sahil Sasapara

10 months ago

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

Author:
Samuel Abera

9 months ago

6.1k
Hero Beer

Author:
Samuel Abera

9 months ago

3.4k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

8 months ago

1.2k
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.

Author:
Coastal UI

5 months ago

854
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.

Author:
Coastal UI

5 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components