JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<div class="box">
<div class="box3">
<input type="button" value="click me" >
</div>
<h1>Title</h1>
</div>

<div class="box1">
<h2>My main box</h2>
<p>This is the box for responsive nature to check on all devices</p>
</div>

<div class="box2">
<ul>
<li>Box color</li>
<li>Box size</li>
<li>box nature</li>
</ul></div>
<div class="box4">
<ul>
<li>Box color</li>
<li>Box size</li>
<li>box nature</li>
</ul></div>

<img src="abc.jpg" width="460" height="345">
<div class="dd">
</div>

CSS

* {
  box-sizing: border-box;
}
input{
  float:right;
  border-radius:20%;
  width:30%;
  height:30px;
  border:5px solid black;
}
.box {
  display:grid;
  border: 1px solid red;
  padding: 15px;
  background-color: #965343;
}
.box3 {
  display:grid;
  border: 1px solid red;
  padding: 15px;
  background-color: #965343;
}
h1{
  color:white;
}
.box1 {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
.box2 {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
  background-color:#1E5C63;
}
.box4 {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
  background-color:#1E5C63;
}

li{
  width:90px;
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
li:hover {
  background-color: #0099cc;
}
img {
    max-width: 100%;
    height: auto;
    
}
div.dd {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid red;
}