Components

Card

Use Semji's card component to create readable, responsive content displays with Tailwind CSS for your web applications.

Basic example

Default

A fundamental card includes a title, content, and an additional action content.Cards initially have no predefined width, thus they inherit a 100% width by default unless specified otherwise.

Welcome to Our Service

Discover the features and benefits that our service offers. Enhance your experience with our user-friendly platform designed to meet all your needs.

Size

Card Sizes

Card sizes with `card-{xs|sm|md|lg|xl}` utility classes.

Innovative Solutions

Explore our cutting-edge features designed to elevate your experience. Learn how our solutions can help you achieve your goals.

Learn more about our features.

Innovative Solutions

Explore our cutting-edge features designed to elevate your experience. Learn how our solutions can help you achieve your goals.

Learn more about our features.

Innovative Solutions

Explore our cutting-edge features designed to elevate your experience. Learn how our solutions can help you achieve your goals.

Learn more about our features.

Innovative Solutions

Explore our cutting-edge features designed to elevate your experience. Learn how our solutions can help you achieve your goals.

Learn more about our features.

Innovative Solutions

Explore our cutting-edge features designed to elevate your experience. Learn how our solutions can help you achieve your goals.

Learn more about our features.

Content types

Body

Simple body example with text.

Welcome to our card Indulge in a delightful journey through our offerings. Jelly lemon drops, tiramisu, chocolate cake, cotton candy, soufflé, and oat cake sweet roll are just a taste of what's in store.

Image

Example showcasing an image card with content.

Apple Smart Watch

Stay connected, motivated, and healthy with the latest Apple Watch.

Titles, text, and links

Buttons and links placed within `card-actions` can be referred to as actions.

Welcome to Our Platform

Your journey starts here

Explore a range of features and services designed to enhance your experience. Join us and make the most out of what we have to offer.

Get Started Learn More

Card header

With component class `card-header` you can specify the styling and content for the header sections of a card element in your web application.

Exclusive Feature Highlight

Discover the unique benefits and features we offer. Dive deeper to learn how our solutions can enhance your experience and meet your needs effectively.

Card footer

With component class `card-footer`, you can specify the styling and content for the footer sections of a card element in your web application.

Featured Update

Explore the latest enhancements and updates. Stay informed with our new features designed to improve your experience and deliver greater value.

2 days ago

List group

Create a simple list displayed within a card-like interface. Utilize the <a href="https://tailwindcss.com/docs/border-width#between-children" target="_blank" class="link link-primary">Divide</a> utility class to add borders between the list items.

Product Overview
Key Features
Customer Reviews

Images caps & overlay

Image placeholders

The image's positioning in the card is determined by the placement of the figure element. When the figure element is the first child, the image will be positioned at the top; conversely, if it is the last child, the image will be positioned at the bottom.

Airpods Max

A perfect balance of exhilarating high-fidelity audio and the effortless magic of Airpods.

Airpods Max

A perfect balance of exhilarating high-fidelity audio and the effortless magic of Airpods.

Image overlays

By utilizing the `image-full` modifier class, the image expands to occupy the entire width and is employed as an overlay.

Marketing

Boost your brand's visibility and engagement through targeted marketing strategies.

Card glass

Apply the `glass` modifier class to the `card` component class to impart a glass effect onto the card.

Smartphone

A high-quality smartphone with the latest features for a premium user experience.

Horizontal

The `card-side` class positions images responsively, with options for left or right placement based on breakpoints like `sm`, `md`, and `lg`.

Airpods Max

This is a wider card with supporting text below as a natural lead-in to additional content.

Card layout

Card groups

Utilize the `card-group` class to establish a container for organizing cards into a cohesive group.

Travel to Paris

Discover iconic landmarks, world-class museums, and exquisite cuisine. Explore the Eiffel Tower, Louvre Museum, and charming neighborhoods.

Card text content

Travel to Rome

Visit ancient ruins, stunning basilicas, and enjoy delicious Italian cuisine. Explore the Colosseum, Vatican City, and more.

Card text content

Travel to Sydney

Explore the vibrant city of Sydney, where every corner tells a story. Visit iconic landmarks, laze on beautiful beaches, and immerse yourself in a lively arts scene.

Card text content

Animations

Image scaling animation on hover

Implement a hover effect on the card image that animates a zoom-out transition.

Card title

Nike Air Max is a popular line of athletic shoes that feature Nike's signature Air cushioning technology in the sole.

Translate animation on hover

Apply a hover animation to the card image that translates it upwards.

Discover a range of delightful treats including lemon drops, tiramisu, chocolate cake, and cotton candy. Our collection offers a variety of flavors to satisfy every craving.

Enjoy a selection of sweet indulgences such as soufflé, oat cake, and sweet rolls. Each item is crafted to bring a touch of sweetness to your day.

Navigation

Tabs in card

Basic tabs in card example.

Welcome to the Home tab! Here, you can explore the latest updates, news, and highlights. Stay informed about what's happening and never miss out on important announcements.