Home
magersa
Elevated feature card

Elevated feature card

This tailwind example is contributed by magersa, on 09-Feb-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author magersa

4.4k

Fork Fullscreen

<div class="relative max-w-sm">
    <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-green-500 rounded-lg"></span>
    <div class="relative h-full p-3 bg-white border-2 border-green-500 rounded-lg">
        <div class="flex items-center -mt-1">
            <svg class="w-8 h-8 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                fill="currentColor" aria-hidden="true">
                <path
                    d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z">
                </path>
            </svg>
            <h3 class="my-2 ml-3 text-lg font-bold text-gray-800">New content, more engagement</h3>
        </div>

<p class="my-2 text-gray-600">
            Our AI will help you create engaging content that resonates
            with your audience.
        </p>
    </div>

</div>

Related Examples

CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

8 months ago

848
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

8 months ago

981
News Feed

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

1 year ago

1.7k
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Author:
Nicole Shalom

9 months ago

1.3k
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.6k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

2.5k
Drinkware landing page

Author:
Maxim

11 months ago

1.5k
credit card checkout

Author:
Antony

2 years ago

3.5k
Floating capsule

Author:
Amazing Engineer

9 months ago

740
Event notification card

Author:
Odessa Young

3 years ago

9.7k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components