Jobs recommended for you

This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing:

A colorful header background.

A company logo/profile image styled as a rounded thumbnail.

A job title (e.g., Senior Product Designer).

A company name.

A location with an icon.

Job type (e.g., Full-time).

Time since posting (e.g., 2d ago).

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 22-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are blog page template, article page template,Author box, User information,banner

Blog post page Profile Team Jumbotron

Author Code Master(Mfuranziza Dusabe Hamza)

Tailwind v3.4 1.1k 29

Fork Fullscreen

<div class="job-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative h-20 bg-gradient-to-r from-orange-500 to-red-600">
        <button class="absolute top-2 right-2 text-white hover:text-orange-100 save-btn">
            <svg class="w-6 h-6 save-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
            </svg>
        </button>
        <img class="absolute -bottom-8 left-4 w-16 h-16 rounded-full border-4 border-white dark:border-gray-800 object-cover" 
             src="https://images.unsplash.com/photo-1611162616475-46b635cb6868" 
             alt="CloudTech logo">
    </div>
    
    <div class="pt-12 px-4 pb-4">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="font-bold text-lg dark:text-white">Data Scientist</h3>
                <p class="text-sm font-medium text-gray-600 dark:text-gray-300 mt-1">CloudTech Analytics</p>
            </div>
            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full dark:bg-blue-900 dark:text-blue-200">
                Featured
            </span>
        </div>

<div class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            <span>San Francisco, CA · Remote</span>
        </div>

<div class="mt-4 flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Python
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Machine Learning
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                SQL
            </span>
        </div>

<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <span class="text-sm text-gray-500 dark:text-gray-400">100+ applicants</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                Apply Now
            </button>
        </div>
    </div>
</div>

<div class="job-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative h-20 bg-gradient-to-r from-purple-500 to-pink-600">
        <button class="absolute top-2 right-2 text-white hover:text-purple-100 save-btn">
            <svg class="w-6 h-6 save-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
            </svg>
        </button>
        <img class="absolute -bottom-8 left-4 w-16 h-16 rounded-full border-4 border-white dark:border-gray-800 object-cover" 
             src="https://images.unsplash.com/photo-1584433144859-1fc3ab64a957" 
             alt="HealthCare Corp logo">
    </div>
    
    <div class="pt-12 px-4 pb-4">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="font-bold text-lg dark:text-white">Medical Director</h3>
                <p class="text-sm font-medium text-gray-600 dark:text-gray-300 mt-1">HealthCare Corp</p>
            </div>
            <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full dark:bg-yellow-900 dark:text-yellow-200">
                New
            </span>
        </div>

<div class="mt-4 flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Healthcare
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                MD Required
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Leadership
            </span>
        </div>

<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <span class="text-sm text-gray-500 dark:text-gray-400">20+ applicants</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                Apply Now
            </button>
        </div>
    </div>
</div>

<div class="job-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative h-20 bg-gradient-to-r from-teal-500 to-cyan-600">
        <button class="absolute top-2 right-2 text-white hover:text-teal-100 save-btn">
            <svg class="w-6 h-6 save-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
            </svg>
        </button>
        <img class="absolute -bottom-8 left-4 w-16 h-16 rounded-full border-4 border-white dark:border-gray-800 object-cover" 
             src="https://images.unsplash.com/photo-1560179707-f14e90ef3623" 
             alt="FinTech logo">
    </div>
    
    <div class="pt-12 px-4 pb-4">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="font-bold text-lg dark:text-white">Financial Analyst</h3>
                <p class="text-sm font-medium text-gray-600 dark:text-gray-300 mt-1">Global FinTech</p>
            </div>
            <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full dark:bg-red-900 dark:text-red-200">
                Actively Hiring
            </span>
        </div>

<div class="mt-4 flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Excel
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Financial Modeling
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                CFA
            </span>
        </div>

<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <span class="text-sm text-gray-500 dark:text-gray-400">60+ applicants</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                Apply Now
            </button>
        </div>
    </div>
</div>

<div class="job-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative h-20 bg-gradient-to-r from-indigo-500 to-blue-600">
        <button class="absolute top-2 right-2 text-white hover:text-indigo-100 save-btn">
            <svg class="w-6 h-6 save-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
            </svg>
        </button>
        <img class="absolute -bottom-8 left-4 w-16 h-16 rounded-full border-4 border-white dark:border-gray-800 object-cover" 
             src="https://images.unsplash.com/photo-1555421689-491a97ff2040" 
             alt="EduTech logo">
    </div>
    
    <div class="pt-12 px-4 pb-4">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="font-bold text-lg dark:text-white">Education Consultant</h3>
                <p class="text-sm font-medium text-gray-600 dark:text-gray-300 mt-1">EduTech Worldwide</p>
            </div>
            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full dark:bg-green-900 dark:text-green-200">
                Remote
            </span>
        </div>

<div class="mt-4 flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Curriculum Design
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                E-Learning
            </span>
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full dark:bg-blue-900 dark:text-blue-200">
                Training
            </span>
        </div>

<div class="mt-4 flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>Contract</span>
            </div>
            <span class="text-sm text-gray-500 dark:text-gray-400">$65k - $85k</span>
        </div>

<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <span class="text-sm text-gray-500 dark:text-gray-400">40+

Related Examples

Avatar
Avatar

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

2 years ago

5.1k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

2 years ago

4.1k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

2 years ago

4.6k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

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

Ameth Galarcio

1 year ago

2.3k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.3k
Team Showcase

KULDEEP

1 year ago

1.6k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Team Members

Abdul Baset Bappy

1 year ago

1.2k