MynaUI
No results found.
Theme
Toggle Theme (Dark)
Documentation
Getting Started
Design System
Changelog
FAQ
Legal
Icons
Elements
Accordion
Alert Dialog
Alert
Avatar Groups
Avatar
Badge
Breadcrumb
Button Groups
Button
Calendar
Combobox
Command
Context Menu
Data Table
Dialog
Drawer
Dropdown Menu
Menubar
Pagination
Popover
Progress
Rating
Sheet
Skeleton
Spinner
Table
Tabs
Toast
Toggle and Toggle Group
Tooltip
Forms
Checkbox
Date Picker
Input OTP
Input
Radio
Select
Slider
Switch
Textarea
Marketing
404
Banners
Blog List
Blog Post
Call to Action
Cookies
FAQ
Features
Footer
Header
Hero
Newsletters
Statistics
Testimonial Logos
Application
App Headers
App Sheets
Application Dialogs
Card Headers
Cards
Containers
Dividers
Empty States
Forgot Password
Login
Notifications
Registration
Section Headers
Documentation
  • Getting Started
  • Copybook New
  • Design System
  • Icons Updated
  • Changelog
  • Legal
  • Figma
  • Request Components
  • Request Icons
Elements
  • Accordion
  • Alert Dialog
  • Alert
  • Avatar Groups
  • Avatar
  • Badge
  • Breadcrumb
  • Button Groups
  • Button
  • Calendar
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Dialog
  • Drawer
  • Dropdown Menu
  • Menubar
  • Pagination
  • Popover
  • Progress
  • Rating
  • Sheet
  • Skeleton
  • Spinner
  • Table
  • Tabs
  • Toast
  • Toggle and Toggle Group
  • Tooltip
Forms
  • Checkbox
  • Date Picker
  • Input OTP
  • Input
  • Radio
  • Select
  • Slider
  • Switch
  • Textarea
Marketing
  • 404
  • Banners
  • Blog List
  • Blog Post
  • Call to Action
  • Cookies
  • FAQ
  • Features
  • Footer
  • Header
  • Hero
  • Newsletters
  • Statistics
  • Testimonial Logos
Application
  • App Headers
  • App Sheets
  • Application Dialogs
  • Card Headers
  • Cards
  • Containers
  • Dividers
  • Empty States
  • Forgot Password
  • Login
  • Notifications
  • Registration
  • Section Headers
Newsletter

Get the latest news and updates from MynaUI

Subscribe for Updates

Blog Post

A single blog entry with a prominent headline, detailed content, publication date, author info, and related images.

export default function Basic() {
  return (
    <article className="prose mx-auto px-4 py-24 dark:prose-invert">
      <h1 className="text-balance font-extrabold tracking-tight">
        The Importance of Mindfulness in Daily Life
      </h1>
      <div className="flex items-center space-x-4">
        <span className="text-muted-foreground">By Praveen Juge</span>
        <span className="h-4 w-px bg-border" />
        <span className="text-muted-foreground">June 15, 2024</span>
      </div>
      <p>
        In today&apos;s fast-paced world, it&apos;s easy to get caught up in the
        hustle and bustle of daily life, constantly rushing from one task to the
        next. However, it&apos;s important to take a step back and practice
        mindfulness, which can have a profound impact on our overall well-being.
      </p>
      <h2>What is Mindfulness?</h2>
      <p>
        Mindfulness is the practice of being present and fully engaged in the
        moment, without judgment or distraction. It involves paying attention to
        your thoughts, feelings, and physical sensations, and accepting them
        without trying to change or control them.
      </p>
      <h2>The Benefits of Mindfulness</h2>
      <p>
        Practicing mindfulness can have a range of benefits, both physical and
        mental. It can help reduce stress and anxiety, improve focus and
        concentration, and even boost immune function. Additionally, mindfulness
        can foster a greater sense of self-awareness and emotional regulation,
        leading to more fulfilling relationships and a greater sense of overall
        well-being.
      </p>
      <h2>Incorporating Mindfulness into Your Daily Life</h2>
      <p>
        Incorporating mindfulness into your daily life doesn&apos;t have to be a
        daunting task. Start small, by setting aside just a few minutes each day
        to practice meditation or deep breathing exercises. You can also try to
        be more present during everyday activities, such as eating, walking, or
        even washing the dishes.
      </p>
      <p>
        Remember, mindfulness is a practice, and it takes time and patience to
        develop. But with consistent effort, you can cultivate a greater sense
        of inner peace and well-being, and live a more fulfilling and meaningful
        life.
      </p>
    </article>
  );
}
import {
  Facebook,
  Linkedin,
  XTwitter,
  Copy,
} from "@mynaui/icons-react";

export default function Simple() {
  return (
    <article className="flex flex-col">
      <header className="prose mx-auto px-4 py-20 dark:prose-invert">
        <h1 className="mb-4 text-balance font-extrabold tracking-tight">
          The Beauty of Minimalism: Embracing Less for More
        </h1>
        <div className="flex items-center space-x-4">
          <span>Praveen Juge</span>
          <span className="h-4 w-px bg-border" />
          <span>June 15, 2024</span>
        </div>
      </header>
      <main className="flex-1">
        <section className="w-full">
          <img loading="lazy" decoding="async"
            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
            alt="Blog Hero Image"
            width={1200}
            height={500}
            className="max-h-96 w-full object-cover"
          />
        </section>
        <section className="prose mx-auto px-4 py-12 dark:prose-invert">
          <p className="lead">
            In a world consumed by excess and clutter, the concept of minimalism
            has emerged as a powerful antidote, offering a refreshing
            perspective on how we approach life, design, and technology. This
            article explores the beauty and benefits of embracing minimalism,
            and how it can transform the way we interact with the digital
            landscape.
          </p>
          <h2>The Allure of Simplicity</h2>
          <p>
            At the heart of minimalism lies a profound appreciation for
            simplicity. By stripping away the unnecessary and focusing on the
            essential, we unlock a sense of clarity and focus that can
            profoundly impact our digital experiences. From sleek and intuitive
            user interfaces to streamlined web applications, the principles of
            minimalism can elevate the user experience and foster a deeper
            connection between the digital and the physical.
          </p>
          <blockquote>
            &quot;Minimalism has transformed the way I approach web design. By
            embracing the power of less, I&apos;ve been able to create
            experiences that are not only visually stunning but also remarkably
            efficient and intuitive.&quot;
            <cite>- Jane Smith, UI/UX Designer</cite>
          </blockquote>
          <h2>Decluttering the Digital Landscape</h2>
          <p>
            In a world where digital information and interactions are constantly
            vying for our attention, the principles of minimalism offer a
            refreshing antidote. By decluttering our digital environments, we
            can reduce cognitive load, improve focus, and foster a sense of calm
            and clarity that enhances our overall well-being.
          </p>
          <img loading="lazy" decoding="async"
            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
            alt="Minimalist Design"
            width={800}
            height={400}
            className="h-96 rounded-lg object-cover"
          />
          <h2>The Power of Intentionality</h2>
          <p>
            Minimalism is not just about aesthetics; it&apos;s a mindset that
            encourages us to be intentional about the digital tools and
            experiences we engage with. By carefully curating our digital
            environments, we can eliminate distractions, streamline workflows,
            and cultivate a sense of purpose and focus that empowers us to
            achieve more with less.
          </p>
          <p>
            This intentionality extends beyond the individual; it also shapes
            the way we approach web development and design. By embracing
            minimalist principles, developers and designers can create digital
            experiences that are not only visually appealing but also highly
            efficient, accessible, and scalable.
          </p>
          <h2>Conclusion: Embracing the Minimalist Mindset</h2>
          <p>
            In a world that often celebrates excess and complexity, the
            minimalist approach offers a refreshing alternative. By embracing
            the beauty of simplicity and the power of intentionality, we can
            unlock a new era of digital experiences that are not only visually
            stunning but also profoundly impactful.
          </p>
          <p>
            As we continue to navigate the ever-evolving digital landscape, the
            principles of minimalism will only grow in importance, guiding us
            towards a future where less truly is more. Join the minimalist
            revolution and discover the transformative power of simplicity in
            the digital realm.
          </p>
          <div>
            <h3 className="tracking-tight">Share</h3>
            <div className="mt-4 flex space-x-4">
              <a
                href="#"
                className="inline-flex items-center justify-center rounded-full bg-primary-foreground p-2"
              >
                <XTwitter className="size-5" />
                <span className="sr-only">Share on Twitter</span>
              </a>
              <a
                href="#"
                className="inline-flex items-center justify-center rounded-full bg-primary-foreground p-2"
              >
                <Facebook className="size-5" />
                <span className="sr-only">Share on Facebook</span>
              </a>
              <a
                href="#"
                className="inline-flex items-center justify-center rounded-full bg-primary-foreground p-2"
              >
                <Linkedin className="size-5" />
                <span className="sr-only">Share on LinkedIn</span>
              </a>
              <a
                href="#"
                className="inline-flex items-center justify-center rounded-full bg-primary-foreground p-2"
              >
                <Copy className="size-5" />
                <span className="sr-only">Copy Link</span>
              </a>
            </div>
          </div>
        </section>
      </main>
    </article>
  );
}
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Hash } from "@mynaui/icons-react";

export default function WithSidebar() {
  return (
    <div className="mx-auto grid max-w-7xl grid-cols-1 gap-16 px-4 py-20 lg:grid-cols-6">
      <div className="prose col-span-1 max-w-none dark:prose-invert lg:col-span-4">
        <h1 className="mb-5 text-balance font-extrabold tracking-tight">
          The Essence of Minimalism
        </h1>
        <div className="text-muted-foreground">
          <span>By Zen Master</span>
          <span className="mx-2">•</span>
          <span>June 1, 2024</span>
        </div>
        <p className="lead">
          Minimalism is a way of life that embraces simplicity, intentionality,
          and a focus on what truly matters. It is a journey of letting go of
          the excess and embracing the essential, freeing ourselves from the
          burden of material possessions and allowing us to live with greater
          clarity and purpose.
        </p>
        <img loading="lazy" decoding="async"
          src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
          width={1200}
          height={630}
          alt="Minimalist interior"
          className="h-96 rounded-lg object-cover"
        />
        <figcaption>A minimalist living space</figcaption>
        <p>
          At its core, minimalism is about intentionally curating our lives to
          include only the things that bring us true value and joy. It is a
          conscious decision to eliminate the clutter, both physical and mental,
          that weighs us down and distracts us from what truly matters. By
          embracing minimalism, we create space for clarity, focus, and
          mindfulness in our daily lives.
        </p>
        <p>
          One of the key principles of minimalism is the idea of &quot;less is
          more.&quot; By owning fewer possessions, we free ourselves from the
          burden of maintaining, organizing, and storing excess. This liberation
          allows us to redirect our time, energy, and resources towards
          experiences, relationships, and pursuits that truly enrich our lives.
        </p>
        <p>
          Minimalism is not about deprivation or asceticism; rather, it is about
          intentional living. It encourages us to carefully consider our choices
          and prioritize what truly adds value and meaning to our existence. By
          letting go of the unnecessary, we create space for the essential,
          allowing us to focus on what truly matters and live with greater
          purpose and fulfillment.
        </p>
      </div>
      <div className="col-span-1 space-y-6 lg:col-span-2">
        <Card>
          <CardHeader>
            <CardTitle>Related Posts</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 text-sm">
            <a href="#" className="flex items-start gap-4">
              <img loading="lazy" decoding="async"
                src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
                width={64}
                height={64}
                alt="Related post"
                className="aspect-square rounded-md object-cover"
              />
              <div className="grid gap-1">
                <p className="line-clamp-2 text-balance font-medium">
                  The Art of Decluttering: A Minimalist&apos;s Guide
                </p>
                <p className="text-muted-foreground">May 15, 2024</p>
              </div>
            </a>
            <a href="#" className="flex items-start gap-4">
              <img loading="lazy" decoding="async"
                src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
                width={64}
                height={64}
                alt="Related post"
                className="aspect-square rounded-md object-cover"
              />
              <div className="grid gap-1">
                <div className="line-clamp-2 text-balance font-medium">
                  Embracing Essentialism: Finding Joy in the Simple Things
                </div>
                <p className="text-muted-foreground">April 20, 2024</p>
              </div>
            </a>
            <a href="#" className="flex items-start gap-4">
              <img loading="lazy" decoding="async"
                src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
                width={64}
                height={64}
                alt="Related post"
                className="aspect-square rounded-md object-cover"
              />
              <div className="grid gap-1">
                <div className="line-clamp-2 text-balance font-medium">
                  Minimalist Travel: Packing Light for Life&apos;s Adventures
                </div>
                <p className="text-muted-foreground">March 1, 2024</p>
              </div>
            </a>
            <a href="#" className="flex items-start gap-4">
              <img loading="lazy" decoding="async"
                src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
                width={64}
                height={64}
                alt="Related post"
                className="aspect-square rounded-md object-cover"
              />
              <div className="grid gap-1">
                <div className="line-clamp-2 text-balance font-medium">
                  The Minimalist Mindset: Cultivating Inner Peace
                </div>
                <p className="text-muted-foreground">February 15, 2024</p>
              </div>
            </a>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Newsletter</CardTitle>
            <CardDescription>
              Subscribe to our newsletter to receive updates on new blog posts
              and tips for living a minimalist lifestyle.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form>
              <Input type="email" placeholder="Enter your email" required />
              <Button type="submit" className="mt-2 w-full">
                Subscribe
              </Button>
            </form>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Popular Categories</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid gap-2 text-sm font-medium">
              <a href="#" className="flex items-center gap-2">
                <Hash className="size-4" stroke={2} />
                Decluttering
              </a>
              <a href="#" className="flex items-center gap-2">
                <Hash className="size-4" stroke={2} />
                Mindfulness
              </a>
              <a href="#" className="flex items-center gap-2">
                <Hash className="size-4" stroke={2} />
                Minimalist Living
              </a>
              <a href="#" className="flex items-center gap-2">
                <Hash className="size-4" stroke={2} />
                Sustainable Living
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
export default function Centered() {
  return (
    <article className="flex min-h-screen flex-col items-center justify-center bg-primary-foreground">
      <div className="prose mx-auto max-w-2xl px-4 pt-16 text-center dark:prose-invert">
        <p className="text-sm font-semibold uppercase tracking-wide text-blue-600">
          Lifestyle · 7 min
        </p>
        <h1 className="text-balance font-extrabold tracking-tight">
          Embracing the Art of Minimalism: A Guide to Simple Living
        </h1>
        <p className="mx-auto max-w-xl text-xl text-muted-foreground">
          Discover the liberating power of minimalism and learn how to declutter
          your life, find joy in simplicity, and cultivate a sense of inner
          peace.
        </p>
        <img loading="lazy" decoding="async"
          src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
          alt="Placeholder Image"
          className="h-96 w-full rounded-md object-cover object-center"
        />
      </div>
      <div className="prose mx-auto max-w-2xl px-4 py-16 dark:prose-invert">
        <h2>What is Minimalism?</h2>
        <p>
          Minimalism is a lifestyle philosophy that emphasizes simplicity,
          intentionality, and the pursuit of what truly matters. It encourages
          individuals to declutter their physical and mental spaces, focusing on
          the essentials and letting go of the excess.
        </p>
        <h2>The Benefits of Minimalism</h2>
        <p>
          Embracing minimalism can bring numerous benefits to your life,
          including:
        </p>
        <ul>
          <li>Reduced stress and improved mental clarity</li>
          <li>More time and energy for meaningful pursuits</li>
          <li>Financial freedom and reduced consumerism</li>
          <li>Appreciation for the present moment</li>
          <li>Increased focus and productivity</li>
        </ul>
        <h2>Decluttering Your Space</h2>
        <p>
          The first step in embracing minimalism is to declutter your physical
          space. Start by going through your possessions and asking yourself
          these questions:
        </p>
        <ol>
          <li>Do I truly need this item?</li>
          <li>Does it bring me joy or serve a purpose?</li>
          <li>Can I let go of this item without regret?</li>
        </ol>
        <p>
          Be ruthless in your decluttering process, and don&apos;t hold onto
          items out of guilt or fear. Remember, the goal is to create a calming
          and intentional living space.
        </p>
        <h2>Simplifying Your Life</h2>
        <p>
          Minimalism extends beyond physical possessions. It&apos;s also about
          simplifying your life and focusing on what truly matters. Consider
          these strategies:
        </p>
        <ul>
          <li>
            Reduce commitments and obligations that don&apos;t align with your
            values
          </li>
          <li>Practice mindfulness and be present in the moment</li>
          <li>Cultivate meaningful relationships and experiences</li>
          <li>Invest in personal growth and self-care</li>
        </ul>
        <h2>Embracing Intentional Living</h2>
        <p>
          At its core, minimalism is about intentional living. It encourages you
          to be mindful of your choices, prioritize your values, and create a
          life that aligns with your true purpose. By embracing minimalism, you
          can cultivate a sense of inner peace, gratitude, and fulfillment.
        </p>
      </div>
      <div className="mx-auto max-w-2xl px-4 pb-16">
        <h2 className="mb-4 text-2xl font-semibold tracking-tight">
          Related Posts
        </h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          <div className="overflow-hidden rounded-lg border bg-background">
            <img loading="lazy" decoding="async"
              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
              alt="Placeholder Image"
              className="h-32 w-full object-cover"
            />
            <div className="p-4">
              <h3 className="mb-2 text-lg font-medium leading-snug">
                The Joy of Decluttering
              </h3>
              <p className="line-clamp-3 text-sm text-muted-foreground">
                Discover the transformative power of decluttering and learn how
                to create a more organized and peaceful living space.
              </p>
            </div>
          </div>
          <div className="overflow-hidden rounded-lg border bg-background">
            <img loading="lazy" decoding="async"
              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
              alt="Placeholder Image"
              className="h-32 w-full object-cover"
            />
            <div className="p-4">
              <h3 className="mb-2 text-lg font-medium leading-snug">
                Mindful Living: Embracing the Present Moment
              </h3>
              <p className="line-clamp-3 text-sm text-muted-foreground">
                Explore the art of mindful living and learn how to cultivate a
                deeper appreciation for the present moment.
              </p>
            </div>
          </div>
          <div className="overflow-hidden rounded-lg border bg-background">
            <img loading="lazy" decoding="async"
              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
              alt="Placeholder Image"
              className="h-32 w-full object-cover"
            />
            <div className="p-4">
              <h3 className="mb-2 text-lg font-medium leading-snug">
                Financial Freedom: Breaking Free from Consumerism
              </h3>
              <p className="line-clamp-3 text-sm text-muted-foreground">
                Discover practical strategies for achieving financial freedom
                and breaking free from the cycle of mindless consumerism.
              </p>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}
import { Button } from "@/components/ui/button";
import { Facebook, XTwitter, Rss } from "@mynaui/icons-react";

export default function DarkHeader() {
  return (
    <article className="flex min-h-screen flex-col">
      <header className="bg-foreground py-16 dark:bg-background">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-center px-4">
          <img loading="lazy" decoding="async"
            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
            width={1200}
            height={600}
            alt="Featured Image"
            className="h-96 w-full max-w-5xl rounded-lg object-cover"
          />
          <div className="prose mt-8 max-w-2xl text-center dark:prose-invert">
            <h1 className="mb-4 text-balance tracking-tight text-background dark:text-foreground">
              The Minimalist&apos;s Guide to Living Simply
            </h1>
            <p className="text-lg text-muted-foreground">
              By Praveen Juge &bull; Published on August 24, 2024 &bull; 12 min
              read
            </p>
          </div>
        </div>
      </header>
      <main className="mx-auto grid max-w-7xl grid-cols-1 gap-16 px-4 py-16 md:grid-cols-6">
        <section className="prose col-span-1 max-w-none dark:prose-invert md:col-span-4">
          <h2 id="introduction">Introduction</h2>
          <p>
            In a world filled with constant distractions and consumerism, the
            concept of minimalism has gained significant traction. At its core,
            minimalism is about embracing a life of intentionality, where we
            focus on the essentials and let go of the excess.
          </p>
          <h2 id="decluttering">Decluttering</h2>
          <p>
            The journey towards minimalism often begins with decluttering. This
            process involves taking a critical look at the possessions that
            surround us and letting go of the items that no longer serve a
            purpose or bring joy. By decluttering, we create physical and mental
            space, allowing us to breathe more freely and focus on what truly
            matters.
          </p>
          <blockquote>
            &ldquo;Simplicity is the ultimate sophistication.&rdquo; &mdash;
            Leonardo da Vinci
          </blockquote>
          <p>
            Decluttering can be a liberating experience, as it frees us from the
            weight of material possessions and the emotional baggage that often
            accompanies them. It&apos;s a process of letting go, not just of
            physical items, but also of the attachments and beliefs that keep us
            tethered to a life of excess.
          </p>
          <h2 id="mindful-consumption">Mindful Consumption</h2>
          <p>
            Minimalism also encourages mindful consumption, where we consciously
            evaluate our needs and make intentional choices about the things we
            bring into our lives. By adopting a more thoughtful approach to
            consumption, we can reduce our environmental impact, save money, and
            cultivate a sense of gratitude for the things we already have.
          </p>
          <p>
            Instead of being driven by impulse or societal pressure, minimalists
            strive to purchase only what they truly need and value. This mindset
            extends beyond material possessions and can also apply to
            experiences, commitments, and even digital clutter.
          </p>
          <figure>
            <img loading="lazy" decoding="async"
              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
              width={800}
              height={600}
              alt="Minimalist living space"
              className="h-96 rounded-lg object-cover"
            />
            <figcaption>
              A minimalist living space can promote a sense of calm and clarity.
            </figcaption>
          </figure>
          <h2 id="finding-joy">Finding Joy in Simplicity</h2>
          <p>
            Ultimately, minimalism is about finding joy in simplicity. By
            removing the clutter and distractions from our lives, we create
            space for what truly matters - our relationships, personal growth,
            and the pursuit of meaningful experiences.
          </p>
          <p>
            Living a minimalist lifestyle doesn&apos;t mean deprivation or
            austerity; rather, it&apos;s about intentionally curating our
            surroundings and focusing on the things that bring us genuine
            fulfillment. It&apos;s a journey of self-discovery, where we learn
            to appreciate the beauty in simplicity and find contentment in the
            present moment.
          </p>
        </section>
        <aside className="col-span-1 w-full space-y-8 md:col-span-2">
          <section>
            <h5 className="mb-4 font-semibold">Related Posts</h5>
            <div className="grid gap-4">
              <a
                href="#"
                className="group block overflow-hidden rounded-lg border p-4"
              >
                <h6 className="font-semibold group-hover:underline">
                  The Art of Essentialism
                </h6>
                <p className="mt-1 text-sm text-muted-foreground">
                  Discover the power of focusing on the essential.
                </p>
              </a>
              <a
                href="#"
                className="group block overflow-hidden rounded-lg border p-4"
              >
                <h6 className="font-semibold group-hover:underline">
                  The Joy of Less: A Minimalist Living Guide
                </h6>
                <p className="mt-1 text-sm text-muted-foreground">
                  Embrace a life of simplicity and freedom.
                </p>
              </a>
            </div>
          </section>
          <section>
            <h5 className="mb-4 font-semibold">Tags</h5>
            <div className="flex flex-wrap gap-2 text-sm font-medium">
              <a href="#" className="rounded-full border px-3 py-1">
                Minimalism
              </a>
              <a href="#" className="rounded-full border px-3 py-1">
                Simplicity
              </a>
              <a href="#" className="rounded-full border px-3 py-1">
                Intentional Living
              </a>
            </div>
          </section>
          <section>
            <h5 className="mb-4 font-semibold">Share</h5>
            <div className="flex gap-2">
              <Button variant="outline" size="icon">
                <XTwitter className="size-5" />
              </Button>
              <Button variant="outline" size="icon">
                <Facebook className="size-5" />
              </Button>
              <Button variant="outline" size="icon">
                <Rss className="size-5" />
              </Button>
            </div>
          </section>
        </aside>
      </main>
    </article>
  );
}

Not affiliated with Figma, TailwindCSS or shadcn/ui.