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

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

joker
joker cyber punk

Author:
Baraka Salvator

8 months ago

1.2k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

9 months ago

1.8k
htmlcss0

Author:
Anonymous

7 months ago

623
mailer
gmail style

Author:
МОЙДОЫР

3 months ago

181
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.3k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

8 months ago

686
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

10 months ago

1.2k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

901
Atlas AI Analyst Workspace
A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

Author:
Hamza Atig

1 month ago

87
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

4 months ago

249
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

762
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components