JSFiddle - React, Tailwind, and code Playground

by kekeb303

HTML

<html>

  <head>
    <meta charset="utf-8">

    <body style="background-color:black;">>
      <h1 style="text-align:center;color:BlueViolet;font-size:400%;">EXPERTIZE</h1>
      <h1 style="text-align:center;color:BlueViolet;font-size:300%;">GENRES</h1>
      <div class="wrapper">
        <div class="box a">Comedy</div>
        <div class="box b">Action</div>
        <div class="box c">Drama</div>
        <div class="box d">Horror</div>
        <div class="box e">Romance</div>
        <div class="box f">Reality</div>
      </div>
    </body>
</html>

CSS

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-rows: 100px 100px 100px 100px 100px 100px;
  grid-gap: 10px;
  color: #444;
}

.box {
  width: 150px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: 250px;
  margin-top: -20px;
  background-color: #444;
  color: #fff;
  border-radius: 6px;
  /* padding: 20px; */
  font-size: 150%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}