JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BlogPost - Tailsaw </title>
</head>

<body>
  <!-- START NAV -->
  <nav class="navbar">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="../">
          <img src="https://svgshare.com/i/tqR.svg" alt="Acme">
        </a>
        <span class="navbar-burger burger" data-target="navbarMenu">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </div>
      <div id="navbarMenu" class="navbar-menu">
        <div class="navbar-end">
          <div class=" navbar-item">
            <div class="control has-icons-left">
              <input class="input is-rounded" type="email" placeholder="Search">
              <span class="icon is-left">
                <i class="fa fa-search"></i>
              </span>
            </div>
          </div>
          <a class="navbar-item is-active is-size-5 has-text-weight-semibold">
            Home
          </a>
          <a class="navbar-item is-size-5 has-text-weight-semibold">
            Examples
          </a>
          <a class="navbar-item is-size-5 has-text-weight-semibold">
            Features
          </a>
        </div>
      </div>
    </div>
  </nav>
  <!-- END NAV -->

  <!-- Image -->
  <section class="hero ">
    <div class="hero-body">
      <div class="container">
        <div class="columns">
          <div class="column is-8 is-offset-2">
            <figure class="image is-16by9">
              <img src="https://ucarecdn.com/83e71ac6-6c75-4e7c-96e9-5aae15a4b3f0/" alt="blog image"> 
            </figure>
          </div>
        </div>

        <section class="section">
          <div class="columns">
            <div class="column is-8...

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

mark {
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}

.nyx {
  background: linear-gradient(70deg, #fff810 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
}

.fyn{
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding:5px;
  border-radius: 4px;
  color: #fff;
}
body {
  font-family: 'Nunito', sans-serif;
}

nav.navbar {
  height: 6rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
}

:root {
  ::-webkit-scrollbar {
    height: 10px;
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background: #efefef;
    border-radius: 6px
  }

  ::-webkit-scrollbar-thumb {
    background: #d5d5d5;
    border-radius: 6px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #c4c4c4
  }
}

::selection {
  color: lavender;
  background-color: black;
}