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

masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

9 months ago

1.3k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

10 months ago

945
Lots of button examples
tailwind button examples

Author:
QQ-VVN

7 months ago

468
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

10 months ago

1.7k
Team Members

Author:
Abdul Baset Bappy

6 months ago

881
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

8 months ago

1k
chat bar
live chat

Author:
gidy

7 months ago

1.1k
Show credit card details

Author:
Manuela Bianka

2 years ago

12.1k
Half filled circle with tailwind

Author:
Alok

2 years ago

13.5k
Services

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

11 months ago

1.9k
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)

7 months ago

691
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

11 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components