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)

1.2k

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

random design

Author:
QQ-VVN

1 month ago

55
pages / slides

Author:
MD Fardous Alom

4 months ago

733
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

332
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

1 month ago

271
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

7 months ago

2.7k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

1 month ago

144
Active Beauty Main Page

Author:
Maxim

2 months ago

256
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

4 months ago

819
Plant Game
Checking to see if it works

Author:
Becky Keyworth

1 month ago

132
Snake Game tailwind
snake game

Author:
QQ-VVN

1 month ago

208
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

557
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

3 weeks ago

37

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components