JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Web Design Task: Task</title>
</head>

<body>
  <header>
    <div class="title">My Website</div>
    <nav>
      <ul>
        <li>
          <a href="">Link 1</a>
        </li>
        <li>
          <a href="">Link 2</a>
        </li>
        <li>
          <a href="">Link 3</a>
        </li>
      </ul>
    </nav>

  </header>

  <main>
    <article>
      <h1>This is the main heading</h1>
      <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
        melon azuki bean garlic.</p>

      <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

      <ul class="cards">
        <li>
          <h2>Card One</h2>
          <div class="inner">
            <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
              avocado.</p>
          </div>
        </li>
        <li>
          <h2>Card Two</h2>
          <div class="inner">
            <p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
              spinach carrot soko.</p>
          </div>
        </li>
        <li>
          <h2>Card Three</h2>
          <div class="inner">
            <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion
              chickpea gram corn pea.</p>
          </div>
        </li>
        <li>
          <h2>Card Four</h2>
          <div class="inner">
            <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion
              chickpea gram corn pea.</p>
          </div>
        </li>
       ...

CSS

* {
      box-sizing: border-box;
    }

    html {
      font: 1.2em/1.4 Arial, Helvetica, sans-serif;
    }

    body {
      padding: 0 0 1em;
    }

    header {
      background-color: #333;
      color: #fff;
      border: 5px solid #000;
    }

    header ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    header a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 0.5em 1em;
      border-top: 1px solid #999;
    }

    header .title {
      font-size: 150%;
      font-style: italic;
      font-weight: bold;
      padding: 1em;
    }

    main {
      padding: 0 1em;
    }

    .cards {
      list-style: none;
      margin: 0;
      padding: 0;

    }

    .cards li {
      border: 5px solid #000;
      margin-bottom: 1em;
    }

    .cards h2 {
      background-color: #333;
      color: #fff;
      margin: 0;
      padding: 0.5em 1em;
    }

    .cards .inner {
      padding: 0.5em 1em;
    }

    .sidebar {
      background-color: #333;
      border: 5px solid #000;
      padding: 0.5em 1em;
      color: #fff;
    }

    @media screen and (min-width:50em) {
      header {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        column-gap: 50%;
      }

      nav ul {
        display: flex;
        padding-top: 20px;
        justify-content: right;
      }

      nav a {
        border-top: none;
      }

      main {

        display: grid;
          grid-template-columns: 3fr 1fr;
          column-gap: 20px;
      }
      .sidebar{
        margin-top:1rem;
      }
      .cards{
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      }
    }