JSFiddle - React, Tailwind, and code Playground

by vktechno

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" type="text/css" href="movie.css" />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Audiowide"
    />
  </head>

  <body>
    <!-- wrapper -->
    <div class="wrapper vh-100 d-flex flex-column">
      <header class="flex-shrink-0"></header>
      <div class="row flex-grow-1">
        <div class="col-4 movie-details"></div>
      </div>
    </div>
    <!-- wrapper -->

    <script
      src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"
    ></script>

    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
      integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
      crossorigin="anonymous"
    ></script>

    <script src="movie.js"></script>
  </body>
</html>

CSS

header {
  overflow: hidden;
  display: block;
  background-color: blue;
  padding: 20px 10px;
}

.movie-details {
  background-color: chartreuse;
}