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

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