purchase

buy car online

This tailwind example is contributed by Nishimwe Jeanine, on 29-May-2025. Component is made with Tailwind v3.4. It is responsive.

Tag Cloud

Author Nishimwe Jeanine

Tailwind v3.4 1.4k 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoHub - Buy Cars Online</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background-color: #1a1a1a;
            color: white;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            color: #ff6b00;
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #ff6b00;
        }
        
        /* Hero Section */
        .hero {
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8');
            background-size: cover;
            background-position: center;
            height: 500px;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
        }
        
        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: #ff6b00;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #e05d00;
        }
        
        /* Search Section */
        .search-section {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            margin-top: -50px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        .form-group select,
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        /* Featured Cars */
        .section-title {
            text-align: center;
            margin: 60px 0 40px;
            font-size: 36px;
        }
        
        .cars-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }
        
        .car-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .car-card:hover {
            transform: translateY(-10px);
        }
        
        .car-img {
            height: 200px;
            width: 100%;
            object-fit: cover;
        }
        
        .car-info {
            padding: 20px;
        }
        
        .car-title {
            font-size: 22px;
            margin-bottom: 10px;
        }
        
        .car-specs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            color: #666;
        }
        
        .car-price {
            font-size: 24px;
            font-weight: bold;
            color: #ff6b00;
            margin-bottom: 15px;
        }
        
        /* Footer */
        footer {
            background-color: #1a1a1a;
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #ff6b00;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column a:hover {
            color: #ff6b00;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #333;
            color: #999;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container">
            <nav>
                <div class="logo">AutoHub</div>
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Cars</a></li>
                    <li><a href="#">How It Works</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Find Your Dream Car Online</h1>
                <p>Browse thousands of new and used cars from the comfort of your home</p>
                <a href="#" class="btn">Browse Inventory</a>
            </div>
        </div>
    </section>

<div class="container">
        <section class="search-section">
            <form class="search-form">
                <div class="form-group">
                    <label for="make">Make</label>
                    <select id="make">
                        <option value="">Any Make</option>
                        <option value="toyota">Toyota</option>
                        <option value="honda">Honda</option>
                        <option value="ford">Ford</option>
                        <option value="bmw">BMW</option>
                        <option value="mercedes">Mercedes</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="model">Model</label>
                    <select id="model">
                        <option value="">Any Model</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="price">Max Price</label>
                    <select id="price">
                        <option value="">No Max</option>
                        <option value="10000">$10,000</option>
                        <option value="20000">$20,000</option>
                        <option value="30000">$30,000</option>
                        <option value="40000">$40,000</option>
                        <option value="50000">$50,000</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="year">Year</label>
                    <select id="year">
                        <option value="">Any Year</option>
                        <option value="2023">2023</option>
                        <option value="2022">2022</option>
                        <option value="2021">2021</option>
                        <option value="2020">2020</option>
                        <option value="2019">2019</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>&nbsp;</label>
                    <input type="submit" value="Search" class="btn" style="cursor: pointer;">
                </div>
            </form>
        </section>
    </div>

<div class="container">
        <h2 class="section-title">Featured Cars</h2>
        <div class="cars-grid">
            
            <div class="car-card">
                <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d" alt="Tesla Model S" class="car-img">
                <div class="car-info">
                    <h3 class="car-title">Tesla Model S</h3>
                    <div class="car-specs">
                        <span>2023</span>
                        <span>Electric</span>
                        <span>10,000 mi</span>
                    </div>
                    <div class="car-price">$89,990</div>
                    <a href="#" class="btn">View Details</a>
                </div>
            </div>
            
            
            <div class="car-card">
                <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7" alt="Ford Mustang" class="car-img">
                <div class="car-info">
                    <h3 class="car-title">Ford Mustang GT</h3>
                    <div class="car-specs">
                        <span>2022</span>
                        <span>Gasoline</span>
                        <span>15,000 mi</span>
                    </div>
                    <div class="car-price">$42,500</div>
                    <a href="#" class="btn">View Details</a>
                </div>
            </div>
            
            
            <div class="car-card">
                <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70" alt="Audi Q5" class="car-img">
                <div class="car-info">
                    <h3 class="car-title">Audi Q5</h3>
                    <div class="car-specs">
                        <span>2021</span>
                        <span>Diesel</span>
                        <span>25,000 mi</span>
                    </div>
                    <div class="car-price">$38,750</div>
                    <a href="#" class="btn">View Details</a>
                </div>
            </div>
        </div>
    </div>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>AutoHub</h3>
                    <p>Your trusted online car buying platform. We make car shopping simple, transparent, and convenient.</p>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Inventory</a></li>
                        <li><a href="#">Sell Your Car</a></li>
                        <li><a href="#">Financing</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Customer Service</h3>
                    <ul>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Shipping</a></li>
                        <li><a href="#">Returns</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Connect With Us</h3>
                    <ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">YouTube</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 AutoHub. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Related Examples

Info chips with icon

Bunny

3 years ago

10.5k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

10.9k
Button cloud for categories,tags etc

Kris Showen

3 years ago

13.9k
Category filter section
Neatly organized clickable rectangular elements with category names

Anonymous

2 years ago

8.9k
Tag cloud with Javascript

Charlotte Dupont

3 years ago

11.3k
User list
User list

Anonymous

1 year ago

944
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

441
Responsive list
Horizontal list of items

Sophia Baker

3 years ago

10.9k
Category Filter
Neatly organized clickable rectangular elements with category names

Márcio Bortolini

2 years ago

2.6k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
Tag cloud
Tag cloud with hover effect it also has support for dark mode

OmKar Mehta

2 years ago

2.9k