JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<ul>
                <li>Home</li>
                <li>Gallary</li>
                <li>Info</li>
                <li>History</li>
                <li>About</li>
                </ul>
                <hr>
                <h1>Dolly</h1>
                <div class="box">
                    <div>
                <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="img">
                </div>  
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione laborum enim, reiciendis magnam at quibusdam voluptate architecto tempore sequi. Ea ex harum atque eligendi, odit praesentium, totam aliquid laudantium provident!
                  </p>
                   </div>

CSS

body{
  margin:0;
}
ul{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 background-color:tomato;
 margin:0;
 padding:0;
}
li{

  font-size:20px;
  padding:10px;
  list-style:none;
  background-color:#fff;
}
hr{
  margin:0;
  height:10px;
  border:none;
  background-color:lightSkyBlue;
}
.box{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.box p{
    width: 50%;
}
h1{
    text-align: center;
}