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)

918

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

walletp2p

Author:
Anonymous

3 months ago

583
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

3 months ago

813
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

2 months ago

211
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

7.7k
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

1 month ago

175
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

1 week ago

67
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

4 days ago

22
Login page

Author:
Reuben Enahoro

4 months ago

968
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

3 weeks ago

415
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

4 days ago

9
Icon group

Author:
Conan Hilton

2 years ago

9.1k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components