Home
Code Master(Mfuranziza Dusabe Hamza)
Innovative Rwanda-Canada Transport Services Website

Innovative Rwanda-Canada Transport Services Website

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 25-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

Breadcrumb Hero About us

Author Code Master(Mfuranziza Dusabe Hamza)

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rwanda-Canada Transport Services | Safe & Reliable Shipping</title>
    <meta name="description" content="Professional transport and shipping services from Rwanda to Canada. We handle cargo, personal belongings, and commercial shipments with care.">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'rwanda-blue': '#20603d',
                        'rwanda-yellow': '#fad201',
                        'canada-red': '#d52b1e',
                        'primary': '#20603d',
                        'secondary': '#d52b1e',
                        'accent': '#fad201',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        
        .hero-gradient {
            background: linear-gradient(120deg, rgba(32, 96, 61, 0.9) 0%, rgba(213, 43, 30, 0.85) 100%);
        }
        
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .tracking-progress {
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .tracking-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #20603d 0%, #d52b1e 100%);
            width: 65%;
        }
        
        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .typewriter {
            overflow: hidden;
            border-right: .15em solid #fad201;
            white-space: nowrap;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #fad201; }
        }
    </style>
</head>
<body class="bg-gray-50">
    
    <nav class="bg-white shadow-lg fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex space-x-7">
                    <div class="flex-shrink-0 flex items-center">
                        <span class="text-primary font-bold text-xl">Rwanda-Canada Transport</span>
                    </div>
                    <div class="hidden md:flex items-center space-x-1">
                        <a href="#" class="py-4 px-2 text-primary border-b-4 border-primary font-semibold">Home</a>
                        <a href="#services" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Services</a>
                        <a href="#tracking" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Tracking</a>
                        <a href="#pricing" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Pricing</a>
                        <a href="#contact" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Contact</a>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-3">
                    <a href="#" class="py-2 px-4 bg-primary text-white font-medium rounded hover:bg-opacity-90 transition duration-300">Get Quote</a>
                    <a href="#" class="py-2 px-4 bg-secondary text-white font-medium rounded hover:bg-opacity-90 transition duration-300">Track Shipment</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="outline-none mobile-menu-button">
                        <svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                            <path d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>

<header class="hero-gradient min-h-screen flex items-center pt-16 pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 gap-8 items-center">
            <div class="text-white">
                <h1 class="text-4xl md:text-5xl font-bold mb-4 typewriter">Bridging Continents, Delivering Trust</h1>
                <p class="text-xl mb-8">Experience seamless shipping between Rwanda and Canada with our innovative logistics solutions powered by real-time tracking and AI-powered route optimization.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#quote" class="bg-accent text-gray-900 font-bold py-3 px-6 rounded-lg hover:bg-yellow-400 transition duration-300 flex items-center">
                        <span>Get Instant Quote</span>
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                    <a href="#services" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
                        Explore Services
                    </a>
                </div>
            </div>
            <div class="relative">
                <div class="floating">
                    <img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Cargo plane" class="rounded-lg shadow-xl">
                </div>
                <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg">
                    <div class="flex items-center">
                        <div class="bg-primary rounded-full p-2 mr-3">
                            <i class="fas fa-shipping-fast text-white text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600">Current Delivery Time</p>
                            <p class="font-bold text-primary">7-10 Days</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

<section class="py-12 bg-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div>
                    <div class="text-4xl font-bold text-primary">98%</div>
                    <div class="text-gray-600">On-Time Delivery</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">5,000+</div>
                    <div class="text-gray-600">Shipments Monthly</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">12</div>
                    <div class="text-gray-600">Years Experience</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">24/7</div>
                    <div class="text-gray-600">Customer Support</div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Innovative Shipping Solutions</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Leveraging cutting-edge technology to provide seamless shipping experiences between Rwanda and Canada</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-50 rounded-xl p-6 card-hover">
                    <div class="bg-primary bg-opacity-10 rounded-lg p-3 inline-block mb-4">
                        <i class="fas fa-box-open text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Smart Cargo Tracking</h3>
                    <p class="text-gray-600 mb-4">Real-time IoT sensors monitor location, temperature, and humidity of your shipments throughout the journey.</p>
                    <a href="#" class="text-primary font-medium flex items-center">
                        <span>Learn more</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-6 card-hover">
                    <div class="bg-secondary bg-opacity-10 rounded-lg p-3 inline-block mb-4">
                        <i class="fas fa-robot text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">AI Route Optimization</h3>
                    <p class="text-gray-600 mb-4">Our AI algorithms calculate the most efficient routes, saving time and reducing carbon emissions.</p>
                    <a href="#" class="text-secondary font-medium flex items-center">
                        <span>Learn more</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-6 card-hover">
                    <div class="bg-accent bg-opacity-10 rounded-lg p-3 inline-block mb-4">
                        <i class="fas fa-file-invoice-dollar text-accent text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Blockchain Documentation</h3>
                    <p class="text-gray-600 mb-4">Secure, tamper-proof customs documentation and payment processing using blockchain technology.</p>
                    <a href="#" class="text-accent font-medium flex items-center">
                        <span>Learn more</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

<section id="tracking" class="py-16 bg-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Revolutionary Shipment Tracking</h2>
                    <p class="text-xl text-gray-600 mb-6">Our advanced tracking system provides real-time updates and predictive analytics for your shipments.</p>
                    
                    <div class="bg-white rounded-xl p-6 shadow-sm mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <div class="font-medium">Tracking ID: RC789456123</div>
                            <div class="text-sm font-medium text-primary">In Transit</div>
                        </div>
                        <div class="tracking-progress mb-4">
                            <div class="tracking-progress-fill"></div>
                        </div>
                        <div class="grid grid-cols-4 text-xs text-gray-500">
                            <div class="text-center">
                                <div class="h-2 w-2 bg-primary rounded-full mx-auto mb-1"></div>
                                <div>Received</div>
                            </div>
                            <div class="text-center">
                                <div class="h-2 w-2 bg-primary rounded-full mx-auto mb-1"></div>
                                <div>Processing</div>
                            </div>
                            <div class="text-center">
                                <div class="h-2 w-2 bg-gray-300 rounded-full mx-auto mb-1"></div>
                                <div>In Transit</div>
                            </div>
                            <div class="text-center">
                                <div class="h-2 w-2 bg-gray-300 rounded-full mx-auto mb-1"></div>
                                <div>Delivered</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-sm">
                        <h3 class="font-medium mb-4">Latest Update</h3>
                        <div class="flex">
                            <div class="flex flex-col items-center mr-4">
                                <div class="rounded-full bg-primary w-8 h-8 flex items-center justify-center">
                                    <i class="fas fa-plane-departure text-white text-sm"></i>
                                </div>
                                <div class="w-0.5 h-16 bg-gray-200 my-1"></div>
                            </div>
                            <div class="pb-6">
                                <p class="font-medium">Departed from Kigali International Airport</p>
                                <p class="text-sm text-gray-500">Today at 14:30 GMT+2</p>
                                <p class="text-sm mt-1">Flight No. WB203 • Estimated arrival: 08:45 GMT-5 tomorrow</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <img src="https://images.unsplash.com/photo-1566576721346-d4a3b4eaeb55?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Tracking interface" class="rounded-lg shadow-xl">
                </div>
            </div>
        </div>
    </section>

<section id="quote" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Instant Quote Calculator</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Get an accurate estimate for your shipment in seconds with our AI-powered pricing algorithm</p>
            </div>
            
            <div class="max-w-3xl mx-auto bg-gray-50 rounded-xl p-8 shadow-sm">
                <form>
                    <div class="grid md:grid-cols-2 gap-6 mb-8">
                        <div>
                            <label class="block text-gray-700 mb-2">Origin</label>
                            <div class="relative">
                                <select class="block appearance-none w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary">
                                    <option>Kigali, Rwanda</option>
                                    <option>Other Rwandan Cities</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Destination</label>
                            <div class="relative">
                                <select class="block appearance-none w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary">
                                    <option>Toronto, Canada</option>
                                    <option>Montreal, Canada</option>
                                    <option>Vancouver, Canada</option>
                                    <option>Calgary, Canada</option>
                                    <option>Ottawa, Canada</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-3 gap-6 mb-8">
                        <div>
                            <label class="block text-gray-700 mb-2">Weight (kg)</label>
                            <input type="number" class="w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="e.g. 25">
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Dimensions (cm)</label>
                            <div class="flex space-x-2">
                                <input type="number" class="w-1/3 bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="L">
                                <input type="number" class="w-1/3 bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="W">
                                <input type="number" class="w-1/3 bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="H">
                            </div>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Shipment Type</label>
                            <div class="relative">
                                <select class="block appearance-none w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary">
                                    <option>Document</option>
                                    <option>Package</option>
                                    <option>Freight</option>
                                    <option>Vehicle</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button type="button" class="bg-primary text-white font-medium rounded-lg py-3 px-8 hover:bg-opacity-90 transition duration-300">
                            Calculate Quote
                        </button>
                    </div>
                </form>
                
                <div class="mt-8 p-6 bg-primary text-white rounded-lg hidden" id="quote-result">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-semibold">Your Quote Estimate</h3>
                        <span class="text-2xl font-bold">$427.50</span>
                    </div>
                    <p class="mb-2">Estimated delivery time: 7-9 business days</p>
                    <p class="text-sm opacity-80">This quote includes door-to-door service, customs clearance, and insurance up to $1,000.</p>
                    <button class="mt-4 bg-white text-primary font-medium rounded-lg py-2 px-6 w-full hover:bg-opacity-90 transition duration-300">
                        Book Now
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-100 parallax" style="background-image: url('https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-4">What Our Customers Say</h2>
                <p class="text-xl text-white text-opacity-90 max-w-3xl mx-auto">Trusted by businesses and individuals across Rwanda and Canada</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white bg-opacity-95 rounded-xl p-6 card-hover">
                    <div class="flex text-accent mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-700 mb-4">"The real-time tracking feature is incredible. I watched my shipment move from Kigali to Montreal with hourly updates. Best shipping experience ever!"</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                        <div>
                            <div class="font-medium">Jean Paul</div>
                            <div class="text-sm text-gray-500">Kigali Business Owner</div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white bg-opacity-95 rounded-xl p-6 card-hover">
                    <div class="flex text-accent mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-700 mb-4">"As an importer of Rwandan coffee to Canada, I rely on their consistent delivery times and careful handling. The blockchain documentation makes customs a breeze."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                        <div>
                            <div class="font-medium">Sarah Johnson</div>
                            <div class="text-sm text-gray-500">Toronto Coffee Importer</div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white bg-opacity-95 rounded-xl p-6 card-hover">
                    <div class="flex text-accent mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <p class="text-gray-700 mb-4">"I shipped personal belongings to my daughter in Ottawa. The price was fair, the process was simple, and everything arrived perfectly. Will definitely use again."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                        <div>
                            <div class="font-medium">Marie Uwase</div>
                            <div class="text-sm text-gray-500">Sending to Family in Canada</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-primary text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-6">Ready to Ship Between Rwanda and Canada?</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of satisfied customers who trust us with their important shipments</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#" class="bg-accent text-gray-900 font-bold py-3 px-8 rounded-lg hover:bg-yellow-400 transition duration-300">
                    Get Started Today
                </a>
                <a href="#contact" class="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
                    Contact Us
                </a>
            </div>
        </div>
    </section>

<footer class="bg-gray-900 text-white pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Rwanda-Canada Transport</h3>
                    <p class="text-gray-400 mb-4">Bridging continents with innovative logistics solutions and reliable shipping services.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Services</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Air Freight</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Sea Freight</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Ground Shipping</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Customs Clearance</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Warehousing</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Get a Quote</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Track Shipment</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Schedule Pickup</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Locations</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Support Center</a></li>
                    </ul>
                </div>
                
                <div id="contact">
                    <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt text-primary mr-2 mt-1"></i>
                            <span class="text-gray-400">123 Logistics Ave, Kigali, Rwanda</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone-alt text-primary mr-2"></i>
                            <span class="text-gray-400">+250 796132866</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope text-primary mr-2"></i>
                            <span class="text-gray-400">mfuranzizahamza@gmail.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
                <p>© 2023 Rwanda-Canada Transport Services. All rights reserved.</p>
            </div>
        </div>
    </footer>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.1k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.3k
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.

Author:
Ayyamperumal S

7 months ago

1.5k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

6 months ago

1.2k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

3 months ago

960
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

3 months ago

228
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

2 months ago

601
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

2 months ago

639
About Us

Author:
KULDEEP

2 months ago

364
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

5 days ago

47
HERO

Author:
ABDO-SY

5 months ago

500
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components