delivery

It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

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

Other

Author Nishimwe Jeanine

378

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 Express Delivery</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

/* Variables */
        :root {
            --primary-color: #0088cc;
            --secondary-color: #00aaff;
            --accent-color: #ff6600;
            --dark-color: #333333;
            --light-color: #f5f5f5;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }

/* Global Styles */
        body {
            background-color: #f9f9f9;
            color: var(--dark-color);
            line-height: 1.6;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

/* Header Styles */
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.8rem;
            font-weight: bold;
        }

.logo span {
            color: var(--accent-color);
        }

nav ul {
            display: flex;
            list-style: none;
        }

nav ul li {
            margin-left: 1.5rem;
        }

nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

nav ul li a:hover {
            color: var(--accent-color);
        }

/* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 5rem 0;
            text-align: center;
        }

.hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

.hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 2rem;
        }

.btn {
            display: inline-block;
            background-color: var(--accent-color);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.btn:hover {
            background-color: #e65c00;
        }

/* Delivery Calculator */
        .calculator {
            background-color: white;
            padding: 3rem 0;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            margin: 2rem 0;
            border-radius: 8px;
        }

.section-title {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--primary-color);
        }

.calculator-form {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 1rem;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

select, input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

.form-row {
            display: flex;
            gap: 1rem;
        }

.form-row .form-group {
            flex: 1;
        }

.checkbox-group {
            display: flex;
            align-items: center;
        }

.checkbox-group input {
            width: auto;
            margin-right: 0.5rem;
        }

.result {
            background-color: var(--light-color);
            padding: 1.5rem;
            border-radius: 5px;
            margin-top: 1.5rem;
            text-align: center;
            display: none;
        }

.result.show {
            display: block;
        }

.price {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
            margin: 0.5rem 0;
        }

/* Services Section */
        .services {
            padding: 3rem 0;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

.service-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

.service-card:hover {
            transform: translateY(-5px);
        }

.service-img {
            height: 200px;
            overflow: hidden;
        }

.service-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.service-content {
            padding: 1.5rem;
        }

.service-content h3 {
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 3rem 0 1rem;
            margin-top: 3rem;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }

.footer-col h3 {
            margin-bottom: 1.5rem;
            font-size: 1.2rem;
        }

.footer-col ul {
            list-style: none;
        }

.footer-col ul li {
            margin-bottom: 0.8rem;
        }

.footer-col ul li a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }

.footer-col ul li a:hover {
            color: var(--accent-color);
        }

.social-links {
            display: flex;
            gap: 1rem;
        }

.social-links a {
            color: white;
            font-size: 1.5rem;
        }

.copyright {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #444;
        }

/* Responsive */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                text-align: center;
            }

nav ul {
                margin-top: 1rem;
            }

.hero h1 {
                font-size: 2rem;
            }

.form-row {
                flex-direction: column;
                gap: 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">Rwanda<span>Express</span></div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Track</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <h1>Fast & Reliable Delivery Across Rwanda</h1>
            <p>We deliver to all 30 districts of Rwanda with same-day service in Kigali and next-day delivery to major cities.</p>
            <a href="#calculator" class="btn">Calculate Delivery Cost</a>
        </div>
    </section>

<section id="calculator" class="calculator">
        <div class="container">
            <h2 class="section-title">Delivery Cost Calculator</h2>
            <form class="calculator-form" id="deliveryForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="fromProvince">From Province</label>
                        <select id="fromProvince" required>
                            <option value="">Select Province</option>
                            <option value="Kigali">Kigali City</option>
                            <option value="Northern">Northern Province</option>
                            <option value="Southern">Southern Province</option>
                            <option value="Eastern">Eastern Province</option>
                            <option value="Western">Western Province</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="fromDistrict">From District</label>
                        <select id="fromDistrict" required>
                            <option value="">Select District</option>
                            
                        </select>
                    </div>
                </div>

<div class="form-row">
                    <div class="form-group">
                        <label for="toProvince">To Province</label>
                        <select id="toProvince" required>
                            <option value="">Select Province</option>
                            <option value="Kigali">Kigali City</option>
                            <option value="Northern">Northern Province</option>
                            <option value="Southern">Southern Province</option>
                            <option value="Eastern">Eastern Province</option>
                            <option value="Western">Western Province</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="toDistrict">To District</label>
                        <select id="toDistrict" required>
                            <option value="">Select District</option>
                            
                        </select>
                    </div>
                </div>

<div class="form-group">
                    <label for="weight">Package Weight (kg)</label>
                    <input type="number" id="weight" min="0.1" step="0.1" value="1" required>
                </div>

<div class="form-group checkbox-group">
                    <input type="checkbox" id="urgent">
                    <label for="urgent">Urgent Delivery (50% extra)</label>
                </div>

<button type="submit" class="btn">Calculate Cost</button>

<div class="result" id="result">
                    <h3>Estimated Delivery Cost</h3>
                    <div class="price" id="price">0 RWF</div>
                    <p id="deliveryTime">Estimated delivery time: </p>
                    <p id="deliveryPartner">Delivery partner: </p>
                </div>
            </form>
        </div>
    </section>

<section class="services">
        <div class="container">
            <h2 class="section-title">Our Delivery Services</h2>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Standard Delivery">
                    </div>
                    <div class="service-content">
                        <h3>Standard Delivery</h3>
                        <p>Reliable delivery within 1-3 business days across Rwanda. Perfect for non-urgent shipments.</p>
                    </div>
                </div>

<div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Express Delivery">
                    </div>
                    <div class="service-content">
                        <h3>Express Delivery</h3>
                        <p>Same-day delivery in Kigali, next-day to major cities. 50% faster than standard service.</p>
                    </div>
                </div>

<div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="International Delivery">
                    </div>
                    <div class="service-content">
                        <h3>International Delivery</h3>
                        <p>Ship to and from Rwanda with our global partners. Customs clearance included.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>RwandaExpress</h3>
                    <p>Fast, reliable delivery services across all 30 districts of Rwanda since 2015.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Track Package</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Service Areas</h3>
                    <ul>
                        <li><a href="#">Kigali City</a></li>
                        <li><a href="#">Northern Province</a></li>
                        <li><a href="#">Southern Province</a></li>
                        <li><a href="#">Eastern Province</a></li>
                        <li><a href="#">Western Province</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>KK 15 Ave, Kigali</li>
                        <li>+250 788 123 456</li>
                        <li>info@rwandaexpress.rw</li>
                        <li>Open 24/7</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 RwandaExpress. All rights reserved.</p>
            </div>
        </div>
    </footer>

// Delivery partners
        const deliveryPartners = {
            'Kigali': ['Safari Logistics', 'Rwanda Express', 'Gorilla Delivery'],
            'other': ['Rwanda Logistics', 'East Africa Delivery', 'Jumia Services']
        };

// Pricing
        const pricing = {
            'Kigali': 1500,  // RWF
            'same_province': 2500,
            'different_province': 4000,
            'urgent': 1.5  // 50% surcharge
        };

// DOM elements
        const fromProvinceSelect = document.getElementById('fromProvince');
        const fromDistrictSelect = document.getElementById('fromDistrict');
        const toProvinceSelect = document.getElementById('toProvince');
        const toDistrictSelect = document.getElementById('toDistrict');
        const weightInput = document.getElementById('weight');
        const urgentCheckbox = document.getElementById('urgent');
        const deliveryForm = document.getElementById('deliveryForm');
        const resultDiv = document.getElementById('result');
        const priceSpan = document.getElementById('price');
        const deliveryTimeSpan = document.getElementById('deliveryTime');
        const deliveryPartnerSpan = document.getElementById('deliveryPartner');

// Populate districts when province changes
        function populateDistricts(provinceSelect, districtSelect) {
            const province = provinceSelect.value;
            districtSelect.innerHTML = '<option value="">Select District</option>';
            
            if (province) {
                districtsByProvince[province].forEach(district => {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    districtSelect.appendChild(option);
                });
            }
        }

// Event listeners for province changes
        fromProvinceSelect.addEventListener('change', () => populateDistricts(fromProvinceSelect, fromDistrictSelect));
        toProvinceSelect.addEventListener('change', () => populateDistricts(toProvinceSelect, toDistrictSelect));

// Form submission
        deliveryForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const fromProvince = fromProvinceSelect.value;
            const fromDistrict = fromDistrictSelect.value;
            const toProvince = toProvinceSelect.value;
            const toDistrict = toDistrictSelect.value;
            const weight = parseFloat(weightInput.value) || 1;
            const isUrgent = urgentCheckbox.checked;
            
            if (!fromProvince || !fromDistrict || !toProvince || !toDistrict) {
                alert('Please select both origin and destination locations');
                return;
            }
            
            // Calculate cost
            let cost;
            if (fromProvince === 'Kigali' && toProvince === 'Kigali') {
                cost = pricing['Kigali'];
            } else if (fromProvince === toProvince) {
                cost = pricing['same_province'];
            } else {
                cost = pricing['different_province'];
            }
            
            // Apply weight multiplier (simplified)
            if (weight > 5) cost *= 1.5;
            if (weight > 10) cost *= 2;
            
            // Urgent delivery
            if (isUrgent) {
                cost *= pricing['urgent'];
            }
            
            // Calculate delivery time
            let time;
            if (fromProvince === 'Kigali' && toProvince === 'Kigali') {
                time = '2-4 hours';
            } else if (fromProvince === toProvince) {
                time = '1 day';
            } else {
                time = '2-3 days';
            }
            
            if (isUrgent) {
                time = '50% faster than standard (' + time + ')';
            }
            
            // Determine delivery partner
            let partner;
            if (fromProvince === 'Kigali' || toProvince === 'Kigali') {
                partner = deliveryPartners['Kigali'][Math.floor(Math.random() * deliveryPartners['Kigali'].length)];
            } else {
                partner = deliveryPartners['other'][Math.floor(Math.random() * deliveryPartners['other'].length)];
            }
            
            // Display results
            priceSpan.textContent = Math.round(cost).toLocaleString() + ' RWF';
            deliveryTimeSpan.textContent = 'Estimated delivery time: ' + time;
            deliveryPartnerSpan.textContent = 'Delivery partner: ' + partner;
            
            resultDiv.classList.add('show');
        });
    </script>
</body>
</html>

Related Examples

Snake Game tailwind
snake game

Author:
QQ-VVN

8 months ago

651
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

401
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

558
Simple Payment Successfull Notification Page

Author:
Anonymous

8 months ago

1.4k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

11 months ago

2.9k
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.9k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

9 months ago

685
Active Beauty Main Page

Author:
Maxim

9 months ago

1.1k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

9 months ago

1.2k
chatbot
is my chatbot

Author:
Omer fils ELENGA

2 months ago

294
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 year ago

1.6k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Author:
Hamza Atig

3 weeks ago

214

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components