JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<!doctype html>
<html lang="en" class="dark">
  <head>
    <title>Zero Trust Solutions: Empower Your Business with UDX Worker</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      rel="stylesheet"
    />
  </head>

  <body class="bg-gray-100 text-gray-800">
<header class="bg-gray-900 text-white py-6 shadow-md">
  <div class="container mx-auto px-4 flex items-center justify-between">
    <!-- Logo -->
    <div class="text-2xl font-extrabold tracking-wide uppercase">
      AlpinaB7Rentals
    </div>
    <!-- Navigation -->
    <nav class="hidden md:flex space-x-8">
      <a href="#features" class="text-gray-400 hover:text-white font-medium transition duration-300">Features</a>
      <a href="#pricing" class="text-gray-400 hover:text-white font-medium transition duration-300">Pricing</a>
      <a href="#gallery" class="text-gray-400 hover:text-white font-medium transition duration-300">Gallery</a>
      <a href="#faq" class="text-gray-400 hover:text-white font-medium transition duration-300">FAQ</a>
      <a href="#contact" class="text-gray-400 hover:text-white font-medium transition duration-300">Contact</a>
    </nav>
    <!-- CTA Button -->
    <a href="#rent" class="bg-blue-600 text-white px-6 py-2 rounded-md shadow-lg hover:bg-blue-700 transition duration-300 text-sm font-semibold">
      Rent Now
    </a>
    <!-- Mobile Menu -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="focus:outline-none">
        <svg class="w-6 h-6 text-gray-400 hover:text-white transition duration-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4...

CSS

img {
  object-fit: cover;
  object-position: left center;
  width: 100%;
  height: 100%;
}

section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.relative .bg-gray-900 {
  max-width: 40%; /* Keep text constrained */
}
  /* Tailwind-compatible slider styling */
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #374151; /* Dark gray background */
    border-radius: 4px;
    outline: none;
    transition: background 0.3s ease-in-out;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #3b82f6; /* Tailwind Blue */
    border-radius: 50%;
    cursor: pointer;
  }

  .slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #3b82f6; /* Tailwind Blue */
    border-radius: 50%;
    cursor: pointer;
  }

JavaScript

function updateValues() {
    // Get slider values
    const hoursWorked = parseFloat(document.getElementById('hoursWorkedSlider').value);
    const hourlyRate = parseFloat(document.getElementById('hourlyRateSlider').value);
    const weeklyExpenses = parseFloat(document.getElementById('weeklyExpensesSlider').value);

    // Calculate total earnings and profit
    const totalEarnings = hoursWorked * hourlyRate;
    const profit = totalEarnings - weeklyExpenses;

    // Update UI
    document.getElementById('hoursWorkedValue').innerText = hoursWorked;
    document.getElementById('hourlyRateValue').innerText = hourlyRate.toFixed(0);
    document.getElementById('weeklyExpensesValue').innerText = weeklyExpenses.toFixed(0);
    document.getElementById('profitResult').innerText = profit.toFixed(2);
  }

  // Initial call to set default values
  updateValues();