Home
Anonymous
cards

cards

cards with background animation

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

Card Tabs Other

Author Anonymous

11.3k

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

Author:
Anonymous

2 years ago

48.9k
cards
cards with background animation

Author:
Anonymous

2 years ago

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

Author:
Anonymous

1 year ago

20.3k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

41.5k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.5k
Tab navigation with alpine JS

Author:
Mr Robot

3 years ago

17.1k
Icon group

Author:
Conan Hilton

2 years ago

9.8k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

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

Author:
Noob

3 years ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Amit Pachange

3 years ago

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

Author:
Ava Brown

2 years ago

13.4k
Info card

Author:
Laurits

2 years ago

10.7k
Tabs section

Author:
Simon Scheffer

2 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components