Clone of LinkedIn Questionnaire Card

This tailwind example is contributed by $@(\/)(\/)¥, on 21-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is copy

Card Banner Clone

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 4.1k 9

Fork Fullscreen

<div class="w-full h-screen flex items-center bg-gray-300 dark:bg-gray-900">
    <div class="xl:w-[40%] lg:w-[50%] sm:w-[80%] xs:w-[96%] mx-auto shadow-lg flex flex-col gap-2 justify-center items-center p-4 mx-4 border-2 rounded-lg bg-white dark:border-gray-500 dark:bg-gray-900">
        <img src="https://media.licdn.com/media/AAYQAgSuAAgAAQAAAAAAACusnN9kMj0wRRWck-KbrrrLSg.png" alt="User Profile" class="w-[6rem] h-[6rem] outline outline-2 outline-gray-200 rounded-full" />
        <div class="w-full pt-4 text-center">
            <h3 class="text-2xl font-serif text-gray-900 dark:text-white">Hi Samuel, are you hiring?</h3>
            <p class="text-xl text-serif pt-2 text-gray-500 dark:text-gray-400">Discover free and easy ways to find a great
                hire,
                fast.</p>
        </div>

<div class="flex sm:flex-row xs:flex-col gap-4 pt-4 dark:text-white">
            <button class="px-6 py-1 rounded-full outline outline-1 outline-blue-700 font-serif">Yes, I'm hiring</button>
            <button class="px-6 py-1 rounded-full outline outline-1 outline-blue-700 font-serif">No, not right now</button>
        </div>
    </div>
</div>

Related Examples

Twitter tweet clone
Replica of twitter tweet card

Sophia Baker

3 years ago

10.4k
cards
cards slices

Anonymous

2 years ago

7.7k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

3.8k
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.7k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.6k
Grid
Grid Grid-Cards

sardorazimov2901

2 years ago

2.5k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

2.8k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

2.8k
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Food App Web design

Aitrik Saha

1 year ago

2.5k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

saim-t8

1 year ago

1.1k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.7k