Tailwind CSS Text Decoration Color

export default function DecorationColorDemo() {
  return (
    <div
      className="h-screen w-screen flex items-center justify-center bg-gray-100"
    >
      <h1 className="text-4xl font-bold underline decoration-pink-500">
        Stylish Underline
      </h1>
    </div>
  );
}

export default function DecorationOpacityDemo() {
  return (
    <div
      className="h-screen w-screen flex items-center justify-center bg-gray-50"
    >
      <h1 className="text-4xl font-medium underline decoration-blue-600/50">
        Underline with Opacity
      </h1>
    </div>
  );
}

export default function HoverDecorationColors() {
  return (
    <div
      className="h-screen w-screen flex items-center justify-center bg-white"
    >
      <p className="text-lg font-semibold underline decoration-gray-400 hover:decoration-yellow-600">
        Hover to change color!
      </p>
    </div>
  );
}

export default function ResponsiveDecorationColor() {
  return (
    <div
      className="h-screen w-screen flex flex-col items-center justify-center bg-gray-100 space-y-4"
    >
      <p className="text-lg underline sm:decoration-green-500 md:decoration-blue-500 lg:decoration-red-500">
        Small Viewports: Green
      </p>
      <p className="text-lg underline sm:decoration-green-500 md:decoration-blue-500 lg:decoration-red-500">
        Medium Viewports: Blue
      </p>
      <p className="text-lg underline sm:decoration-green-500 md:decoration-blue-500 lg:decoration-red-500">
        Large Viewports: Red
      </p>
    </div>
  );
}

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

export default function CustomColors() {
  return (
    <div
      className="h-screen w-screen flex items-center justify-center bg-gray-50"
    >
      <p className="underline decoration-brand">
        Custom Decoration Color Applied
      </p>
    </div>
  );
}

export default function ArbitraryDecorationColor() {
  return (
    <div
      className="h-screen w-screen flex items-center justify-center bg-gray-200"
    >
      <h1 className="font-bold text-2xl underline decoration-[rgba(34,197,94,0.9)]">
        Using Arbitrary RGBA Colors
      </h1>
    </div>
  );
}

export default function NavigationMenu() {
  const menuItems = [
    { id: 1, name: 'Dashboard', path: '/dashboard', isActive: true },
    { id: 2, name: 'Products', path: '/products', isActive: false },
    { id: 3, name: 'Customers', path: '/customers', isActive: false },
    { id: 4, name: 'Analytics', path: '/analytics', isActive: false },
    { id: 5, name: 'Settings', path: '/settings', isActive: false },
    { id: 6, name: 'Support', path: '/support', isActive: false }
  ];

  return (
    <nav className="bg-gray-800 p-4">
      <ul className="flex space-x-6">
        {menuItems.map((item) => (
          <li key={item.id}>
            <a
              href={item.path}
              className={`text-white hover:text-blue-300 ${
                item.isActive
                  ? 'underline decoration-blue-400 decoration-2'
                  : ''
              }`}
            >
              {item.name}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

export default function PriceComparisonTable() {
  const products = [
    { id: 1, name: 'Premium Laptop', originalPrice: 1299, currentPrice: 999 },
    { id: 2, name: 'Wireless Headphones', originalPrice: 199, currentPrice: 149 },
    { id: 3, name: 'Smart Watch', originalPrice: 299, currentPrice: 249 },
    { id: 4, name: 'Gaming Console', originalPrice: 499, currentPrice: 449 },
    { id: 5, name: 'Tablet Pro', originalPrice: 799, currentPrice: 649 },
    { id: 6, name: 'Camera Kit', originalPrice: 899, currentPrice: 749 }
  ];

  return (
    <div className="max-w-2xl mx-auto">
      <table className="w-full">
        <thead className="bg-gray-100">
          <tr>
            <th className="p-4 text-left">Product</th>
            <th className="p-4 text-left">Original Price</th>
            <th className="p-4 text-left">Current Price</th>
          </tr>
        </thead>
        <tbody>
          {products.map((product) => (
            <tr key={product.id} className="border-b">
              <td className="p-4">{product.name}</td>
              <td className="p-4">
                <span className="line-through decoration-red-500 decoration-2">
                  ${product.originalPrice}
                </span>
              </td>
              <td className="p-4 text-green-600">${product.currentPrice}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default function BlogGrid() {
  const blogPosts = [
    {
      id: 1,
      title: 'Getting Started with Web Development',
      excerpt: 'Learn the basics of web development...',
      image: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6',
      alt: 'Coding on laptop'
    },
    {
      id: 2,
      title: 'Advanced CSS Techniques',
      excerpt: 'Master modern CSS concepts...',
      image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085',
      alt: 'CSS code'
    },
    {
      id: 3,
      title: 'JavaScript Best Practices',
      excerpt: 'Write better JavaScript code...',
      image: 'https://images.unsplash.com/photo-1579468118864-1b9ea3c0db4a',
      alt: 'JavaScript code'
    },
    {
      id: 4,
      title: 'Responsive Design Principles',
      excerpt: 'Create mobile-friendly websites...',
      image: 'https://images.unsplash.com/photo-1522542550221-31fd19575a2d',
      alt: 'Responsive design'
    },
    {
      id: 5,
      title: 'Web Performance Optimization',
      excerpt: 'Speed up your website...',
      image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f',
      alt: 'Website performance'
    },
    {
      id: 6,
      title: 'Modern Frontend Frameworks',
      excerpt: 'Compare popular frameworks...',
      image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c',
      alt: 'Frontend frameworks'
    }
  ];

  return (
    <div className="grid gap-6 p-6">
      {blogPosts.map((post) => (
        <article key={post.id} className="bg-white rounded-lg shadow-md">
          <img
            src={post.image}
            alt={post.alt}
            className="w-full h-48 object-cover rounded-t-lg"
          />
          <div className="p-4">
            <h3 className="text-xl font-bold hover:underline hover:decoration-indigo-500 hover:decoration-2">
              {post.title}
            </h3>
            <p className="mt-2 text-gray-600">{post.excerpt}</p>
          </div>
        </article>
      ))}
    </div>
  );
}

export default function TaskList() {
  const tasks = [
    { id: 1, title: 'Update website content', completed: true, priority: 'High' },
    { id: 2, title: 'Review pull requests', completed: false, priority: 'Medium' },
    { id: 3, title: 'Fix navigation bug', completed: true, priority: 'High' },
    { id: 4, title: 'Write documentation', completed: false, priority: 'Low' },
    { id: 5, title: 'Deploy new features', completed: false, priority: 'High' },
    { id: 6, title: 'Team meeting', completed: true, priority: 'Medium' }
  ];

  return (
    <div className="max-w-lg mx-auto p-6">
      <h2 className="text-2xl font-bold mb-4">Task List</h2>
      <ul className="space-y-3">
        {tasks.map((task) => (
          <li
            key={task.id}
            className="flex items-center justify-between p-3 bg-white rounded-lg shadow"
          >
            <span
              className={`${
                task.completed
                  ? 'line-through decoration-green-500 decoration-2 text-gray-500'
                  : ''
              }`}
            >
              {task.title}
            </span>
            <span
              className={`px-2 py-1 rounded text-sm ${
                task.priority === 'High'
                  ? 'bg-red-100 text-red-800'
                  : task.priority === 'Medium'
                  ? 'bg-yellow-100 text-yellow-800'
                  : 'bg-green-100 text-green-800'
              }`}
            >
              {task.priority}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function EventCalendar() {
  const events = [
    { id: 1, date: '2023-12-01', title: 'Team Building', type: 'social' },
    { id: 2, date: '2023-12-05', title: 'Client Meeting', type: 'business' },
    { id: 3, date: '2023-12-10', title: 'Project Deadline', type: 'deadline' },
    { id: 4, date: '2023-12-15', title: 'Training Session', type: 'education' },
    { id: 5, date: '2023-12-20', title: 'Product Launch', type: 'business' },
    { id: 6, date: '2023-12-25', title: 'Holiday Party', type: 'social' }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="grid grid-cols-2 gap-2">
        {events.map((event) => (
          <div
            key={event.id}
            className="p-3 border rounded-lg hover:bg-gray-50"
          >
            <div className="text-sm text-gray-500">{event.date}</div>
            <div
              className={`mt-1 font-medium ${
                event.type === 'business'
                  ? 'underline decoration-blue-500 decoration-2'
                  : event.type === 'deadline'
                  ? 'underline decoration-red-500 decoration-2'
                  : event.type === 'social'
                  ? 'underline decoration-green-500 decoration-2'
                  : 'underline decoration-purple-500 decoration-2'
              }`}
            >
              {event.title}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function BrandNavigation() {
  return (
    <nav className="bg-gray-50 p-6 rounded-lg shadow-sm">
      <ul className="flex space-x-8 justify-center text-lg">
        {['Home', 'Products', 'Services', 'Contact'].map((item) => (
          <li key={item}>
            <a
              href="#"
              className="text-gray-800 underline decoration-brand-blue hover:decoration-brand-hover active:decoration-brand-active decoration-2 transition-all duration-300"
            >
              {item}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  )
}

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

// App.js
export default function ArticleHeader() {
  return (
    <div className="max-w-2xl mx-auto p-8">
      <h1 className="text-4xl font-bold mb-4 inline-block">
        <span className="underline decoration-4 decoration-gradient-start dark:decoration-dark-gradient-start">
          The Future of Web Development
        </span>
      </h1>
      <p className="text-gray-600 dark:text-gray-300 mt-4">
        Published on August 15, 2023
      </p>
      <img
        src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
        alt="Web Development"
        className="w-full h-64 object-cover rounded-lg mt-6"
      />
    </div>
  )
}

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

// App.js
export default function ProductCard() {
  return (
    <div className="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden">
      <div className="p-6">
        <img
          src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
          alt="Product"
          className="w-full h-48 object-cover rounded-lg"
        />
        <div className="mt-4">
          <h2 className="text-2xl font-semibold group">
            <span className="underline decoration-2 decoration-product-primary 
              hover:decoration-product-secondary active:decoration-product-tertiary
              transition-all duration-300">
              Limited Edition Sneakers
            </span>
          </h2>
          <p className="mt-2 text-gray-600">
            $199.99
          </p>
          <button className="mt-4 bg-black text-white px-6 py-2 rounded-full
            hover:bg-gray-800 transition-colors duration-300">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  )
}

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

export default function ConsistentDesign() {
  return (
    <div className="flex flex-col items-center p-6 space-y-4">
      <a
        href="#"
        className="underline decoration-primary decoration-2 hover:decoration-secondary text-lg font-semibold text-gray-800"
      >
        Discover More
      </a>
      <p className="text-gray-600 underline decoration-secondary decoration-dotted">
        Explore the consistent use of decoration styles here.
      </p>
    </div>
  );
}

export default function UtilityCombinations() {
  return (
    <div className="p-4 max-w-md mx-auto">
      <div className="bg-gray-50 border-t-4 border-primary shadow-lg rounded-lg p-6">
        <h3 className="text-xl font-semibold underline decoration-primary decoration-4">
          Build Intricate Designs Effortlessly
        </h3>
        <p className="text-gray-600 mt-3 underline decoration-secondary decoration-wavy">
          Tailwind's utilities can be combined for quick prototyping without compromising design quality.
        </p>
      </div>
    </div>
  );
}

export default function ReadableDecorations() {
  return (
    <div className="p-6 space-y-4 bg-gray-900 text-white h-screen">
      <a
        href="#"
        className="underline text-lg decoration-yellow-400 decoration-4"
      >
        Go to Highlights Section
      </a>
      <p className="leading-relaxed underline decoration-pink-400">
        Proper text decoration amplifies discoverability of interactive elements while ensuring visual clarity.
      </p>
    </div>
  );
}