JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>

CSS

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
  display:flex;
}

.date, .month {
  min-width: 2%;
  width: 6.25%; 
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}

.task {
  min-width: 10%;
  width: 67.5%;
  margin: 5px;
 padding:5px; 
  border: 1px solid red;

}

.status {
  min-width: 5%;
  width: 12.5%;
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}