Home
Anonymous
cards

cards

Forked from> @anonymous/cards-2

cards with background animation

This tailwind example is contributed by Anonymous, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Tabs Other

Author Anonymous

1.7k

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

Icon group

Author:
Conan Hilton

1 year ago

8.9k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.9k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.8k
Invoice
Invoice

Author:
Ameth Galarcio

6 months ago

1.5k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

6 months ago

1.5k
Payment Cards

Author:
Shammi Nethupul

5 months ago

1.2k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

2 months ago

548
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.5k
Card grid for posts

Author:
Mr Robot

2 years ago

18.4k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

2 weeks ago

70
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

4 months ago

645
zoom in effect card
A responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.

Author:
Anum Shahana

3 months ago

877

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components