Tailwind CSS Width

export default function FixedWidthDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="w-64 bg-blue-500 text-white text-center font-bold p-5">
        {/* This box is 256px wide (w-64) */}
        Fixed Width Box
      </div>
    </div>
  );
}

export default function RelativeWidthDemo() {
  return (
    <div className="w-screen h-screen">
      <div className="w-1/2 bg-purple-400 text-white text-center uppercase font-semibold p-5 m-auto">
        {/* Width is 50% of the parent container (w-1/2) */}
        Percent Width Box
      </div>
    </div>
  );
}

export default function ViewportWidthDemo() {
  return (
    <div className="w-screen h-screen bg-cover bg-center" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1489269637500-aa0e75768394')" }}>
      {/* Full width and height of the viewport */}
      <div className="text-white text-center text-4xl font-bold flex items-center justify-center h-full">
        Stunning Viewport Section
      </div>
    </div>
  );
}

export default function ResetWidthDemo() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
      <div className="w-64 bg-red-400 text-white text-center font-medium p-5">
        {/* Fixed width: 256px */}
        Fixed
      </div>
      <div className="w-auto bg-green-400 text-white text-center font-medium p-5 ml-4">
        {/* Reset to auto width */}
        Auto
      </div>
    </div>
  );
}

export default function HoverFocusDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="w-40 bg-blue-600 hover:w-64 text-white font-semibold text-center py-5 transition-all duration-300">
        {/* Expands on hover */}
        Hover Me
      </div>
    </div>
  );
}

export default function BreakpointDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-200">
      <div className="bg-green-500 text-white font-bold text-center p-5 w-full sm:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4">
        {/* Dynamic widths per breakpoint */}
        Responsive Box
      </div>
    </div>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomThemeWidth() {
  return (
    <div className="w-screen h-screen flex items-center justify-center gap-4">
      <div className="w-72 bg-yellow-500 p-5 text-center font-bold text-white">
        {/* 18rem width */}
        Custom Width 72
      </div>
      <div className="w-84 bg-indigo-500 p-5 text-center font-bold text-white">
        {/* 21rem width */}
        Custom Width 84
      </div>
    </div>
  );
}

export default function ArbitraryWidthDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="w-[250px] bg-teal-500 text-white text-center font-semibold p-5">
        {/* 250px width */}
        Arbitrary Width
      </div>
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Leather Backpack",
      price: "$149.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Watch",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Digital Camera",
      price: "$799.99",
      src: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      alt: "Professional digital camera"
    },
    {
      id: 5,
      name: "Laptop Stand",
      price: "$49.99",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Aluminum laptop stand"
    },
    {
      id: 6,
      name: "Mechanical Keyboard",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    }
  ];

  return (
    <div className="container mx-auto px-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map((product) => (
          <div key={product.id} className="w-full hover:shadow-lg transition-shadow duration-300">
            <img 
              src={product.src} 
              alt={product.alt}
              className="w-full h-64 object-cover rounded-t-lg"
            />
            <div className="p-4 border-x border-b rounded-b-lg">
              <h3 className="text-xl font-semibold">{product.name}</h3>
              <p className="text-gray-600">{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function DashboardStats() {
  const stats = [
    {
      id: 1,
      title: "Total Revenue",
      value: "$124,563",
      icon: "https://images.unsplash.com/photo-1523240795612-9a054b0db644",
      change: "+14.5%"
    },
    {
      id: 2,
      title: "Active Users",
      value: "45,257",
      icon: "https://images.unsplash.com/photo-1633332755192-727a05c4013d",
      change: "+23.2%"
    },
    {
      id: 3,
      title: "Conversion Rate",
      value: "3.2%",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      change: "+2.4%"
    },
    {
      id: 4,
      title: "Average Order",
      value: "$234",
      icon: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e",
      change: "+5.7%"
    },
    {
      id: 5,
      title: "Customer Support",
      value: "98%",
      icon: "https://images.unsplash.com/photo-1633332755192-727a05c4013d",
      change: "+1.2%"
    }
  ];

  return (
    <div className="w-[360px] bg-gray-100 p-6">
      <div className="flex flex-wrap gap-6 justify-center">
        {stats.map((stat) => (
          <div key={stat.id} className="w-[280px] bg-white rounded-xl p-6 shadow-sm">
            <div className="flex items-center gap-4">
              <img 
                src={stat.icon} 
                alt="" 
                className="w-12 h-12 rounded-full"
              />
              <div>
                <h3 className="text-gray-500 text-sm">{stat.title}</h3>
                <p className="text-2xl font-bold">{stat.value}</p>
                <span className="text-green-500 text-sm">{stat.change}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function ProgressBars() {
  const skills = [
    { id: 1, name: "HTML", progress: 95, color: "bg-blue-500" },
    { id: 2, name: "CSS", progress: 90, color: "bg-pink-500" },
    { id: 3, name: "JavaScript", progress: 85, color: "bg-yellow-500" },
    { id: 4, name: "React", progress: 80, color: "bg-cyan-500" },
    { id: 5, name: "Node.js", progress: 75, color: "bg-green-500" },
    { id: 6, name: "Python", progress: 70, color: "bg-purple-500" }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-sm">
      <h2 className="text-2xl font-bold mb-6">Skill Progress</h2>
      <div className="space-y-6">
        {skills.map((skill) => (
          <div key={skill.id}>
            <div className="flex justify-between mb-2">
              <span className="font-medium">{skill.name}</span>
              <span>{skill.progress}%</span>
            </div>
            <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
              <div 
                className={`h-full ${skill.color} transition-all duration-500`}
                style={{ width: `${skill.progress}%` }}
              ></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function ImageGallery() {
  const images = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1682687220566-5599dbbebf11",
      alt: "Mountain landscape",
      size: "large"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1682687220198-88e9bdea9931",
      alt: "Ocean sunset",
      size: "medium"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
      alt: "Desert dunes",
      size: "medium"
    },
    {
      id: 4,
      src: "https://images.unsplash.com/photo-1682687220795-796d3f6f7000",
      alt: "Arctic aurora",
      size: "small"
    },
  ];

  const getWidth = (size) => {
    switch(size) {
      case 'large': return 'w-full md:w-2/3';
      case 'medium': return 'w-full md:w-1/2';
      case 'small': return 'w-full md:w-1/3';
      default: return 'w-full';
    }
  };

  return (
    <div className="container mx-auto p-4">
      <div className="flex flex-wrap gap-4">
        {images.map((image) => (
          <div key={image.id} className={`${getWidth(image.size)} p-2`}>
            <img 
              src={image.src} 
              alt={image.alt}
              className="w-full h-64 object-cover rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300"
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default function PricingTable() {
  const plans = [
    {
      id: 1,
      name: "Basic",
      price: "$9",
      features: ["1 User", "5GB Storage", "Basic Support", "Email Access", "2 Projects", "1 Domain"],
      popular: false
    },
    {
      id: 2,
      name: "Pro",
      price: "$29",
      features: ["5 Users", "20GB Storage", "Priority Support", "Email Access", "10 Projects", "5 Domains"],
      popular: true
    },
    {
      id: 3,
      name: "Enterprise",
      price: "$99",
      features: ["Unlimited Users", "100GB Storage", "24/7 Support", "Full Access", "Unlimited Projects", "Unlimited Domains"],
      popular: false
    },
    {
      id: 4,
      name: "Custom",
      price: "Contact",
      features: ["Custom Users", "Custom Storage", "Dedicated Support", "Full Access", "Custom Projects", "Custom Domains"],
      popular: false
    }
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="flex flex-wrap justify-center gap-6">
        {plans.map((plan) => (
          <div 
            key={plan.id} 
            className={`w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1rem)] bg-white rounded-xl p-6 ${
              plan.popular ? 'ring-2 ring-blue-500' : ''
            }`}
          >
            {plan.popular && (
              <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Popular</span>
            )}
            <h3 className="text-xl font-bold mt-4">{plan.name}</h3>
            <p className="text-3xl font-bold my-4">{plan.price}<span className="text-sm text-gray-500">/month</span></p>
            <ul className="space-y-3">
              {plan.features.map((feature, index) => (
                <li key={index} className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
            <button className="w-full mt-6 bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition-colors">
              Choose Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ProductCard() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <div className="w-product-sm md:w-product-md lg:w-product-lg bg-white rounded-xl shadow-lg overflow-hidden">
        <img 
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Product"
          className="w-full h-48 object-cover"
        />
        <div className="p-6">
          <h2 className="text-xl font-bold mb-2">Premium Watch</h2>
          <p className="text-gray-600 mb-4">Luxury timepiece with genuine leather strap</p>
          <div className="flex justify-between items-center">
            <span className="text-2xl font-bold text-blue-600">$299.99</span>
            <button className="bg-blue-500 text-white px-4 py-2 rounded-lg">
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

import { useState } from 'react'

export default function DashboardSidebar() {
  const [isExpanded, setIsExpanded] = useState(true)

  return (
    <div className="h-screen flex">
      <div className={`
        ${isExpanded ? 'w-sidebar-expanded' : 'w-sidebar-collapsed'}
        bg-gray-800 transition-all duration-300 ease-in-out
      `}>
        <div className="p-4 flex justify-end">
          <button 
            onClick={() => setIsExpanded(!isExpanded)}
            className="text-white"
          >
            {isExpanded ? '←' : '→'}
          </button>
        </div>
        {isExpanded && (
          <nav className="mt-6 px-4">
            <div className="flex items-center text-white mb-4 cursor-pointer hover:bg-gray-700 p-2 rounded">
              <img 
                src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
                alt="Dashboard"
                className="w-6 h-6 mr-3"
              />
              <span>Dashboard</span>
            </div>
            <div className="flex items-center text-white mb-4 cursor-pointer hover:bg-gray-700 p-2 rounded">
              <img 
                src="https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d"
                alt="Settings"
                className="w-6 h-6 mr-3"
              />
              <span>Settings</span>
            </div>
          </nav>
        )}
      </div>
    </div>
  )
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ProgressTracker() {
  const steps = [
    { id: 1, title: 'Cart', completed: true },
    { id: 2, title: 'Shipping', completed: true },
    { id: 3, title: 'Payment', completed: false },
    { id: 4, title: 'Confirmation', completed: false }
  ]

  const completedSteps = steps.filter(step => step.completed).length
  const progress = (completedSteps / steps.length) * 100

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="w-tracker relative">
        <div className="absolute h-1 bg-gray-200 w-full top-1/2 -translate-y-1/2"></div>
        <div 
          className="absolute h-1 bg-green-500 transition-all duration-500 top-1/2 -translate-y-1/2"
          style={{ width: `${progress}%` }}
        ></div>
        <div className="relative flex justify-between">
          {steps.map((step) => (
            <div 
              key={step.id} 
              className="flex flex-col items-center w-step"
            >
              <div className={`
                w-8 h-8 rounded-full flex items-center justify-center
                ${step.completed ? 'bg-green-500 text-white' : 'bg-gray-200'}
                transition-colors duration-300
              `}>
                {step.completed ? '✓' : step.id}
              </div>
              <span className={`
                mt-2 font-medium
                ${step.completed ? 'text-green-500' : 'text-gray-500'}
              `}>
                {step.title}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default function BalancedLayout() {
  return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
      <div className="w-64 h-40 bg-blue-500 m-6 rounded-lg text-white font-bold flex items-center justify-center">
        Balanced Box
      </div>
      <div className="w-96 h-40 bg-purple-500 p-4 rounded-lg text-white font-bold flex items-center justify-center">
        Larger Box
      </div>
    </div>
  );
}

export default function AccessibleTextContainer() {
  return (
    <div className="max-w-prose m-auto p-6 bg-white text-gray-800 rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">Accessible Content</h2>
      <p>
        Tailoring width utilities helps maintain focus and supports pleasant reading experiences for all users, especially those requiring assistive technologies.
      </p>
    </div>
  );
}

export default function HighContrastContent() {
  return (
    <section className="max-w-4xl px-8 py-6 bg-gray-900 text-gray-100 mx-auto h-screen">
      <h3 className="text-lg font-bold">Contrast and Readability</h3>
      <p>
        Proper width settings, when combined with high-contrast text and background colors, ensure your content is easily readable for all users.
      </p>
    </section>
  );
}