JSFiddle - React, Tailwind, and code Playground

by jywglady

HTML

<h1>Box Model</h1>

<div class="borderdiv">
<p>The block is bordered with green line (2px)</p>
<ol>
<li>True mastery of any skill takes a lifetime.</li>
<li>Sweat is the lubricant of success.</li>
<li>Energy and persistence conquer all things.</li>
<li>Bravery never goes out of fashion.</li>
<li>If you are doing your best,you will not have to worry about failure.</li>
</ol>
</div>

CSS

h1 {
  width: 40%;
  background: blue;
  color: white;
  padding: 12px;
  margin: 12px auto;
  text-align: center;
}

.borderdiv {
  width: 50%;
  padding: 15px 30px;
  margin: 20px auto;
  border: 2px solid green;
}

p {
  color: red;
  text-align: center;
  border-bottom: 1px dotted red;
}