cards

cards with background animation

This tailwind example is contributed by Anonymous, on 14-Aug-2023. Component is made with Tailwind v3.4. It is responsive.

Card Tabs Other

Author Anonymous

Tailwind v3.4 12.6k 18

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/alpinejs" defer></script>
  </head>
  <body class="bg-gray-100">
    <main
      class="
        relative
        max-w-xl
        mx-auto
        mt-10
        mb-20
        bg-white
        py-8
        px-10
        rounded-md
        shadow-md
      "
      x-data="{
        selected: 0, 
        tabs: [
          {
            title: 'Murcielago',
            icon: 'M19 19v4a4 4 0 1 0 4-4h-4Zm0 0v-6m0 6h-6m6-6V9a4 4 0 1 1 4 4h-4Zm0 0h-6m-4 0h-.007m0 0A4 4 0 1 1 13 9v4m-4.007 0H13m0 0v6m0 0v4a4 4 0 1 1-4-4h4Z',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras sed felis eget velit aliquet sagittis id consectetur purus. Habitant morbi tristique senectus et netus. Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Amet purus gravida quis blandit. Nisi est sit amet facilisis magna etiam.'
          },
          {
            title: 'Monolith',
            icon: 'M19 19v4a4 4 0 1 0 4-4h-4Zm0 0v-6m0 6h-6m6-6V9a4 4 0 1 1 4 4h-4Zm0 0h-6m-4 0h-.007m0 0A4 4 0 1 1 13 9v4m-4.007 0H13m0 0v6m0 0v4a4 4 0 1 1-4-4h4Z',
            content: 'Faucibus purus in massa tempor nec feugiat nisl. Sodales ut etiam sit amet nisl purus. Sit amet porttitor eget dolor morbi non. Risus in hendrerit gravida rutrum quisque non tellus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Vehicula ipsum a arcu cursus.'
          },
          {
            title: ' Perseides',
            icon: 'M19 19v4a4 4 0 1 0 4-4h-4Zm0 0v-6m0 6h-6m6-6V9a4 4 0 1 1 4 4h-4Zm0 0h-6m-4 0h-.007m0 0A4 4 0 1 1 13 9v4m-4.007 0H13m0 0v6m0 0v4a4 4 0 1 1-4-4h4Z',
            content: 'Et odio pellentesque diam volutpat commodo sed egestas egestas. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum.'
          },
          {
            title: 'Supabase',
            icon: 'M19 19v4a4 4 0 1 0 4-4h-4Zm0 0v-6m0 6h-6m6-6V9a4 4 0 1 1 4 4h-4Zm0 0h-6m-4 0h-.007m0 0A4 4 0 1 1 13 9v4m-4.007 0H13m0 0v6m0 0v4a4 4 0 1 1-4-4h4Z',
            content: 'Viverra vitae congue eu consequat. Dui accumsan sit amet nulla facilisi. Imperdiet sed euismod nisi porta. Sed augue lacus viverra vitae congue eu consequat ac felis. Vitae congue mauris rhoncus aenean vel. Varius morbi enim nunc faucibus a pellentesque. Tincidunt eget nullam non nisi est sit. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Suscipit tellus mauris a diam maecenas. Cum sociis natoque penatibus et magnis dis. Sed tempus urna et pharetra pharetra massa. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Elementum nibh tellus molestie nunc non blandit massa. Vitae et leo duis ut diam quam. Nulla facilisi etiam dignissim diam quis enim lobortis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Lobortis mattis aliquam faucibus purus in massa. Tortor condimentum lacinia quis vel eros donec. Lectus mauris ultrices eros in cursus turpis massa. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim.'
          }
        ]
      }"
    >
      <menu class="absolute top-10 -left-16 bg-gray-900 w-16 rounded-l-md">
        <ul>
          <template x-for="(tab, index) in tabs">
            <li>
              <button
                class="text-gray-400 hover:text-white block w-full p-3"
                @click="selected = index"
                :class="selected === index ? 'text-white' : ''"
              >
                <span class="block w-8 mx-auto">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      :d="tab.icon"
                    />
                  </svg>
                </span>
              </button>
            </li>
          </template>
        </ul>
      </menu>
      <article>
        <h1 class="text-2xl font-bold" x-text="tabs[selected]['title']"></h1>
        <hr class="my-4" />
        <p class="mb-2 leading-relaxed" x-text="tabs[selected]['content']"></p>
      </article>
    </main>
    	
		<div class="area">
			<ul class="circles">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
  </body>
</html>

Related Examples

background animation
background animation

Anonymous

3 years ago

53k
cards
cards with background animation

Anonymous

3 years ago

11.9k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.5k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Icon group

Conan Hilton

3 years ago

10.3k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Tab Switch
tab-switching example with tailwind and vanilla JS

Prajwal Hallale

3 years ago

7.9k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Skill showcase section for resume / porfolio website
show skill progression

Ava Brown

3 years ago

14.6k
Info card

Laurits

3 years ago

11.3k
Tabs section

Simon Scheffer

3 years ago

14.7k