rotate card

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 23-Nov-2024. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

290

Fork Fullscreen

<div class="container mx-auto px-4 sm:px-6 lg:px-60 ">
    
    <div>
      <h1 class="text-xl font-bold text-[#0D6B4F] mb-4 pt-12 text-start">Account Types</h1>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 text-center pl-4 md:pl-1">
        
        <div class="flip-card">
          <div class="flip-inner w-80 h-64 relative">
            
            <div class="flip-face bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-lg flex flex-col items-center justify-center">
              <div class="text-center">
                <div class="bg-green-500 text-white w-12 h-12 mx-auto rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-700 mt-4">Service Account</h2>
                <p class="text-sm text-gray-600 mt-2 leading-relaxed">
                    Provide enterprises and organizations with robust business services.
                </p>
              </div>
            </div>
            
            <div class="flip-face back-face bg-gray-200 border border-gray-200 rounded-lg p-6 shadow-sm flex flex-col items-center justify-center">
              <div class="text-center">
                <h2 class="text-lg font-semibold text-gray-700">Additional Info</h2>
                <p class="text-sm text-gray-600 mt-2 leading-relaxed text-center">
                  Quickly build a new service platform within BongoChat using advanced features for user management and enterprise integration.
                </p>
              </div>
            </div>
          </div>
        </div>

<div class="flip-card w-80 h-64">
    <div class="flip-inner relative w-full h-full">
      
      <div class="flip-face bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-lg flex flex-col items-center justify-center">
        <div class="text-center">
          <div class="bg-blue-500 text-white w-12 h-12 mx-auto rounded-full flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h8m-8-4h8M9 8h6" />
            </svg>
          </div>
          <h2 class="text-lg font-semibold text-gray-700 mt-4">Official Accounts</h2>
          <p class="text-sm text-gray-600 mt-2 leading-relaxed">
            Provides media and individuals a new way to post stories and information, innovating author-reader interaction and content management.
          </p>
        </div>
      </div>
      
      <div class="flip-face back-face bg-gray-200 border border-gray-200 rounded-lg p-6 shadow-sm flex flex-col items-center justify-center">
        <div class="text-center">
          <h2 class="text-lg font-semibold text-gray-700">More Information</h2>
          <p class="text-sm text-gray-600 mt-2 leading-relaxed text-center">
            Users can easily engage with content through interactive posts and stories, enhancing communication between creators and their audiences.
          </p>
        </div>
      </div>
    </div>
  </div>

<div class="flip-card w-80 h-64">
    <div class="flip-inner relative w-full h-full">
      
      <div class="flip-face bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-lg flex flex-col items-center justify-center">
        <div class="text-center">
          <div class="bg-purple-500 text-white w-12 h-12 mx-auto rounded-full flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4m16 0l-4 4m4-4l-4-4" />
            </svg>
          </div>
          <h2 class="text-lg font-semibold text-gray-700 mt-4">Mini Program</h2>
          <p class="text-sm text-gray-600 mt-2 leading-relaxed">
            Empowers developers and businesses to revolutionize their services on BongoChat with convenient development and an excellent user experience.
          </p>
        </div>
      </div>
      
      <div class="flip-face back-face bg-gray-200 border border-gray-200 rounded-lg p-6 shadow-sm flex flex-col items-center justify-center">
        <div class="text-center">
          <h2 class="text-lg font-semibold text-gray-700">How it Works</h2>
          <p class="text-sm text-gray-600 mt-2 leading-relaxed text-center">
            With the Mini Program feature, businesses can develop lightweight apps within BongoChat, providing a seamless experience for users.
          </p>
        </div>
      </div>
    </div>
  </div>
      </div>
    </div>
  </div>

Related Examples

Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

1 week ago

29
Updated customer details page
Customer details page

Author:
Olivia Smith

6 months ago

1.8k
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

1 week ago

100
Collapsible content

Author:
Rafferty Kim

1 year ago

12.4k
Fancy underline

Author:
Simon Scheffer

1 year ago

10.2k
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

1 month ago

296
Simple count down timer

Author:
Gopi Yadav

1 year ago

13.9k
Stepper - Without Buttons

Author:
farisubuntu

3 months ago

461
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

5.7k
blockquote

Author:
Freja Jensen

1 year ago

8.5k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

1 year ago

14.8k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent