Tailwind CSS Font Family

export default function BasicFontFamily() {
  return (
    <div className="w-screen h-screen flex flex-col gap-8 items-center justify-center bg-gray-100">
      {/* Applying serif font */}
      <p className="font-serif text-lg text-gray-800 px-10 text-center">
        This is a serif font
      </p>

            {/* Applying sans-serif font */}
      <p className="font-sans text-lg text-gray-800 px-10 text-center">
        This is a sans font
      </p>

      {/* Applying mono font */}
      <p className="font-mono text-lg text-gray-800 px-10 text-center">
        This is a mono font
      </p>

      
      
    </div>
  );
}

export default function HoverFocusFont() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-blue-50">
      {/* Hover changes font to serif */}
      <p className="font-sans hover:font-serif text-lg text-gray-600 px-20 text-center">
        Hover over this text to see the font change.
      </p>
    </div>
  );
}

export default function ResponsiveFontFamily() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center bg-green-50">
      {/* Font alters at different screen sizes */}
      <p className="font-sans sm:font-serif lg:font-mono text-base text-gray-800 px-10 text-center">
        Resize the screen to see the font change dynamically.
      </p>
    </div>
  );
}

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

export default function CustomThemeFonts() {
  return (
    <div className="w-screen h-screen flex flex-col justify-center bg-red-50 px-10 text-center gap-6">
      {/* Using custom display font */}
      <h1 className="font-display text-2xl text-gray-700">
        Aesthetic Heading Text
      </h1>
      {/* Using custom body font */}
      <p className="font-body text-lg text-gray-500">
        Tailwind CSS allows seamless font customizations.
      </p>
    </div>
  );
}

export default function ArbitraryFonts() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-black text-white px-10 text-center">
      {/* Applying arbitrary font family */}
      <p className="font-[Verdana] text-lg">
        Arbitrarily assigned Verdana font-family.
      </p>
    </div>
  );
}

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

export default function BlogPostGrid() {
  const blogPosts = [
    {
      id: 1,
      title: "The Art of Modern Architecture",
      excerpt: "Exploring contemporary design principles in urban spaces",
      author: "Sarah Chen",
      image: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2",
      category: "Architecture"
    },
    {
      id: 2,
      title: "Sustainable Living in 2024",
      excerpt: "Practical tips for reducing your carbon footprint",
      author: "James Wilson",
      image: "https://images.unsplash.com/photo-1518531933037-91b2f5f229cc",
      category: "Lifestyle"
    },
    {
      id: 3,
      title: "Digital Art Revolution",
      excerpt: "How NFTs are changing the art marketplace",
      author: "Maria Garcia",
      image: "https://images.unsplash.com/photo-1561731216-c3a4d99437d5",
      category: "Art"
    },
    {
      id: 4,
      title: "Future of Remote Work",
      excerpt: "Navigating the hybrid workplace model",
      author: "Alex Thompson",
      image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
      category: "Business"
    },
    {
      id: 5,
      title: "Mindful Photography",
      excerpt: "Capturing moments with intention",
      author: "David Kim",
      image: "https://images.unsplash.com/photo-1452587925148-ce544e77e70d",
      category: "Photography"
    },
    {
      id: 6,
      title: "Urban Gardening Guide",
      excerpt: "Growing your own food in limited spaces",
      author: "Emma Roberts",
      image: "https://images.unsplash.com/photo-1466692476868-aef1dfb1e735",
      category: "Gardening"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {blogPosts.map((post) => (
        <div key={post.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img 
            src={post.image} 
            alt={post.title}
            className="w-full h-48 object-cover"
          />
          <div className="p-6">
            <p className="font-mono text-sm text-gray-500 mb-2">{post.category}</p>
            <h2 className="font-serif text-2xl font-bold mb-2">{post.title}</h2>
            <p className="font-sans text-gray-600 mb-4">{post.excerpt}</p>
            <p className="font-sans italic text-sm text-gray-500">By {post.author}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function RecipeCollection() {
  const recipes = [
    {
      id: 1,
      name: "Mediterranean Quinoa Bowl",
      prepTime: "25 mins",
      difficulty: "Easy",
      calories: 450,
      chef: "Gordon Mitchell",
      image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      category: "Healthy"
    },
    {
      id: 2,
      name: "Spicy Thai Basil Noodles",
      prepTime: "35 mins",
      difficulty: "Medium",
      calories: 580,
      chef: "Lisa Wong",
      image: "https://images.unsplash.com/photo-1534939561126-855b8675edd7",
      category: "Asian"
    },
    {
      id: 3,
      name: "Grilled Salmon Salad",
      prepTime: "20 mins",
      difficulty: "Easy",
      calories: 380,
      chef: "Sarah Johnson",
      image: "https://images.unsplash.com/photo-1467003909585-2f8a72700288",
      category: "Seafood"
    },
    {
      id: 4,
      name: "Mushroom Risotto",
      prepTime: "40 mins",
      difficulty: "Medium",
      calories: 520,
      chef: "Antonio Carluccio",
      image: "https://images.unsplash.com/photo-1476124369491-e7addf5db371",
      category: "Italian"
    },
    {
      id: 5,
      name: "Vegan Buddha Bowl",
      prepTime: "30 mins",
      difficulty: "Easy",
      calories: 340,
      chef: "Maya Green",
      image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      category: "Vegan"
    }
  ];

  return (
    <div className="bg-gray-100 p-8">
      <h1 className="font-serif text-4xl text-center mb-8">Featured Recipes</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {recipes.map((recipe) => (
          <div key={recipe.id} className="bg-white rounded-xl overflow-hidden shadow-md">
            <img 
              src={recipe.image} 
              alt={recipe.name}
              className="w-full h-56 object-cover"
            />
            <div className="p-6">
              <span className="font-mono text-xs text-gray-500">{recipe.category}</span>
              <h2 className="font-sans text-2xl font-bold mt-2">{recipe.name}</h2>
              <div className="mt-4 space-y-2">
                <p className="font-sans text-sm">
                  <span className="font-semibold">Prep Time:</span> {recipe.prepTime}
                </p>
                <p className="font-sans text-sm">
                  <span className="font-semibold">Difficulty:</span> {recipe.difficulty}
                </p>
                <p className="font-sans text-sm">
                  <span className="font-semibold">Calories:</span> {recipe.calories}
                </p>
              </div>
              <p className="font-serif italic mt-4 text-gray-600">By Chef {recipe.chef}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function TeamDirectory() {
  const teamMembers = [
    {
      id: 1,
      name: "Alexandra Chen",
      role: "Chief Executive Officer",
      department: "Executive",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      quote: "Innovation drives our success",
      contact: "alex.chen@company.com"
    },
    {
      id: 2,
      name: "Marcus Johnson",
      role: "Lead Developer",
      department: "Engineering",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      quote: "Code is poetry in motion",
      contact: "marcus.j@company.com"
    },
    {
      id: 3,
      name: "Sophia Martinez",
      role: "Design Director",
      department: "Creative",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      quote: "Design speaks when words fail",
      contact: "sophia.m@company.com"
    },
    {
      id: 4,
      name: "James Wilson",
      role: "Marketing Manager",
      department: "Marketing",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      quote: "Building bridges through communication",
      contact: "james.w@company.com"
    },
    {
      id: 5,
      name: "Emily Zhang",
      role: "Product Manager",
      department: "Product",
      image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      quote: "User experience is everything",
      contact: "emily.z@company.com"
    },
    {
      id: 6,
      name: "Robert Brown",
      role: "Finance Director",
      department: "Finance",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      quote: "Numbers tell the real story",
      contact: "robert.b@company.com"
    }
  ];

  return (
    <div className="bg-gray-50 p-8">
      <h1 className="font-serif text-4xl text-center mb-2">Our Leadership Team</h1>
      <p className="font-sans text-center text-gray-600 mb-12">Meet the people driving our vision forward</p>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {teamMembers.map((member) => (
          <div key={member.id} className="bg-white rounded-lg shadow-lg p-6">
            <div className="flex flex-col items-center">
              <img 
                src={member.image} 
                alt={member.name}
                className="w-32 h-32 rounded-full object-cover mb-4"
              />
              <h2 className="font-sans text-xl font-bold">{member.name}</h2>
              <p className="font-mono text-sm text-gray-500 mb-2">{member.role}</p>
              <p className="font-sans text-xs text-gray-400 mb-4">{member.department}</p>
              <p className="font-serif italic text-gray-600 text-center mb-4">"{member.quote}"</p>
              <p className="font-mono text-sm text-blue-600">{member.contact}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function EventTimeline() {
  const events = [
    {
      id: 1,
      title: "Digital Marketing Summit",
      time: "9:00 AM - 11:00 AM",
      speaker: "Rachel Anderson",
      location: "Main Hall A",
      type: "Keynote",
      image: "https://images.unsplash.com/photo-1475721027785-f74eccf877e2"
    },
    {
      id: 2,
      title: "Future of AI Workshop",
      time: "11:30 AM - 1:00 PM",
      speaker: "Dr. Michael Chang",
      location: "Innovation Lab",
      type: "Workshop",
      image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e"
    },
    {
      id: 3,
      title: "Networking Lunch",
      time: "1:00 PM - 2:00 PM",
      speaker: "Hosted by StartUp Hub",
      location: "Garden Terrace",
      type: "Break",
      image: "https://images.unsplash.com/photo-1517457373958-b7bdd4587205"
    },
    {
      id: 4,
      title: "UX Design Principles",
      time: "2:30 PM - 4:00 PM",
      speaker: "Sarah Miller",
      location: "Design Studio",
      type: "Session",
      image: "https://images.unsplash.com/photo-1487611459768-bd414656ea89"
    },
    {
      id: 5,
      title: "Startup Pitch Competition",
      time: "4:30 PM - 6:00 PM",
      speaker: "Panel of Investors",
      location: "Auditorium",
      type: "Competition",
      image: "https://images.unsplash.com/photo-1475721027785-f74eccf877e2"
    },
    {
      id: 6,
      title: "Closing Reception",
      time: "6:30 PM - 8:00 PM",
      speaker: "All Attendees",
      location: "Grand Ballroom",
      type: "Networking",
      image: "https://images.unsplash.com/photo-1511795409834-ef04bbd61622"
    }
  ];

  return (
    <div className="bg-white p-8">
      <h1 className="font-serif text-4xl text-center mb-12">Conference Schedule</h1>
      <div className="max-w-4xl mx-auto">
        {events.map((event) => (
          <div key={event.id} className="mb-8 flex items-start">
            <div className="w-24 flex-shrink-0">
              <p className="font-mono text-sm text-gray-500">{event.time.split('-')[0]}</p>
            </div>
            <div className="flex-grow bg-gray-50 rounded-lg p-6 ml-4 border-l-4 border-blue-500">
              <span className="font-mono text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded">
                {event.type}
              </span>
              <h2 className="font-sans text-xl font-bold mt-2">{event.title}</h2>
              <div className="mt-4 grid grid-cols-2 gap-4">
                <div>
                  <p className="font-serif text-sm text-gray-600">Speaker</p>
                  <p className="font-sans">{event.speaker}</p>
                </div>
                <div>
                  <p className="font-serif text-sm text-gray-600">Location</p>
                  <p className="font-sans">{event.location}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function ProductComparison() {
  const products = [
    {
      id: 1,
      name: "Basic Plan",
      price: "$29",
      period: "monthly",
      description: "Perfect for individuals",
      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      features: ["5 Projects", "10GB Storage", "Basic Analytics", "Email Support"],
      recommended: false
    },
    {
      id: 2,
      name: "Pro Plan",
      price: "$79",
      period: "monthly",
      description: "Ideal for small teams",
      image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      features: ["15 Projects", "50GB Storage", "Advanced Analytics", "24/7 Support", "API Access"],
      recommended: true
    },
    {
      id: 3,
      name: "Enterprise Plan",
      price: "$199",
      period: "monthly",
      description: "For large organizations",
      image: "https://images.unsplash.com/photo-1557804506-669a67965ba0",
      features: ["Unlimited Projects", "1TB Storage", "Custom Analytics", "Dedicated Support", "API Access", "Custom Integration"],
      recommended: false
    },
    {
      id: 4,
      name: "Custom Plan",
      price: "Custom",
      period: "negotiable",
      description: "Tailored solutions",
      image: "https://images.unsplash.com/photo-1551434678-e076c223a692",
      features: ["Custom Projects", "Custom Storage", "Custom Analytics", "Dedicated Team", "Custom API", "White Label"],
      recommended: false
    }
  ];

  return (
    <div className="bg-gray-50 p-8">
      <h1 className="font-serif text-4xl text-center mb-4">Choose Your Plan</h1>
      <p className="font-sans text-center text-gray-600 mb-12">Select the perfect plan for your needs</p>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {products.map((product) => (
          <div 
            key={product.id} 
            className={`bg-white rounded-lg shadow-lg p-6 ${
              product.recommended ? 'ring-2 ring-blue-500' : ''
            }`}
          >
            {product.recommended && (
              <span className="font-mono text-xs text-white bg-blue-500 px-2 py-1 rounded-full">
                Recommended
              </span>
            )}
            <h2 className="font-sans text-2xl font-bold mt-4">{product.name}</h2>
            <div className="mt-4">
              <span className="font-serif text-4xl">{product.price}</span>
              <span className="font-mono text-gray-500">/{product.period}</span>
            </div>
            <p className="font-sans text-gray-600 mt-2">{product.description}</p>
            
            <ul className="mt-6 space-y-3">
              {product.features.map((feature, index) => (
                <li key={index} className="font-sans text-sm flex items-center">
                  <svg className="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
            
            <button className="w-full mt-8 bg-blue-600 text-white font-sans py-2 rounded-lg hover:bg-blue-700 transition-colors">
              Choose Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function BlogLayout() {
  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="font-heading text-5xl mb-6 text-gray-900">
        The Art of Typography
      </h1>
      <div className="font-body text-lg leading-relaxed text-gray-700 mb-8">
        <p>
          Typography is fundamental to good design. It helps establish hierarchy,
          brand recognition, and readability across your digital platforms.
        </p>
      </div>
      <div className="font-accent uppercase tracking-wider text-sm">
        Written by John Doe • 5 min read
      </div>
    </div>
  )
}

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

// App.js
export default function HeroSection() {
  return (
    <div className="bg-gradient-to-r from-purple-600 to-blue-600 min-h-screen">
      <div className="container mx-auto px-6 py-20">
        <h1 className="text-6xl text-white mb-8 leading-tight">
          Transform Your Business with AI
        </h1>
        <p className="font-sans text-xl text-white/80 mb-12 max-w-2xl">
          Leverage cutting-edge artificial intelligence to optimize your operations
          and drive growth.
        </p>
        <button className="px-8 py-4 bg-white text-purple-600 rounded-full 
          text-lg hover:bg-opacity-90 transition-all duration-300">
          Get Started Now
        </button>
      </div>
    </div>
  )
}

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

// App.js
export default function PortfolioHero() {
  return (
    <div className="bg-black text-white min-h-screen flex flex-wrap items-center py-6">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 gap-12">
          <div className="space-y-8">
            <h1 className="font-creative text-4xl leading-none tracking-tight">
              CREATIVE
              <br />
              DEVELOPER
            </h1>
            <p className="font-minimal text-xl text-gray-400">
              Crafting digital experiences through code and design
            </p>
            <div className="font-detail">
              <button className="border border-white px-6 py-3 hover:bg-white 
                hover:text-black transition-all duration-300">
                View Projects
              </button>
            </div>
          </div>
          <div className="relative">
            <img
              src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
              alt="Developer workspace"
              className="rounded-lg object-cover h-full w-full"
            />
          </div>
        </div>
      </div>
    </div>
  )
}

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

export default function BlogHeader() {
  return (
    <header className="bg-gray-100 text-gray-800 py-6 px-2 h-screen">
      <h1 className="text-4xl font-heading">Welcome to Tailwind Typography</h1>
      <p className="mt-6 text-lg">Achieve design harmony with consistent fonts.</p>
    </header>
  );
}

export default function IntroSection() {
  return (
    <section className="px-8 py-12 bg-white">
      <h2 className="font-serif text-5xl font-extrabold leading-tight tracking-tight">
        Stunning Typography, Simplified
      </h2>
      <p className="mt-4 font-sans text-lg text-gray-600 leading-loose tracking-wide">
        Tailwind CSS empowers you to craft balanced layouts and elegant text, streamlining both development and design processes.
      </p>
    </section>
  );
}

export default function AccessibleContent() {
  return (
    <div className="p-8 h-screen">
      <h1 className="text-3xl font-serif leading-tight">Ensure Readability</h1>
      <p className="mt-4 font-sans text-lg text-gray-900 font-thin leading-relaxed">
        Choose font families that prioritize legibility, especially for body text. Small, decorative, or condensed fonts may pose challenges for visually impaired users.
      </p>
    </div>
  );
}

export default function HighContrastBanner() {
  return (
    <div className="p-12 bg-black h-screen">
      <h2 className="font-serif text-4xl text-white mb-4">Accessible Design Matters</h2>
      <p className="font-sans text-gray-200">
        Proper color and font-family choices improve usability, especially for users with low vision or color blindness.
      </p>
    </div>
  );
}

export default function NestedComponent() {
  return (
    <div className="font-sans bg-gray-100 p-8 h-screen">
      <h1 className="font-serif text-4xl">Parent Typography</h1>
      <div className="mt-4 bg-white p-4">
        <p>Nested Sans Typography</p>
        <p className="font-mono">Nested Mono Typography</p>
      </div>
    </div>
  );
}