JSFiddle - React, Tailwind, and code Playground

by Santosh Giridhara

HTML

<div id="parent-div">
  <p id="forward">/</p>
  <p id="back">\</p>
</div>

<br/><br/><br/><br/><br/>

<p id="first"> <strong class="carrot">C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
<p id="second" class="ref"> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>

<h3 id="oceans">The oceans</h3>

<ul>
    <li>Arctic</li>
    <li>Atlantic</li>
    <li>Pacific</li>
    <li>Indian</li>
    <li>Southern</li>
</ul>
 <h3 class="numbered">Numbered paragraphs</h3>

<div id="numbered">
    <p class="numbered">Lorem ipsum</p>
    <p class="numbered">Dolor sit</p>
    <p class="numbered">Amet consectetuer</p>
    <p class="numbered">Magna aliquam</p>
    <p class="numbered">Autem veleum</p>
    <p class="numbered">Autem veleum</p>
    <p class="numbered">Autem veleum</p>
    <p class="numbered">Autem veleum</p>
</div>

CSS

/*** CSS Tutorial: Color page ***/

/* page font */
 body {
    font: 16px"Comic Sans MS", cursive;
    counter-reset: headnum;
}
/* paragraphs */
 p {
    color: #00f;
}
#first {
    font-style: italic;
}
/* initial letters */
 strong {
    color: #f00;
    background-color: #ccc;
    font: 200% serif;
}
.carrot {
    color: red;
}
.spinach {
    color: green;
}
.ref:before {
    font-weight: bold;
    color: navy;
    content:"Reference: ";
}
/* numbered paragraphs */
 ul, #numbered {
    border: 10px solid lightblue;
    float:left;
}
li {
    list-style : lower-roman;
    margin-bottom: 8px;
}
h3 {
    text-align: center;
    clear:left;
}
h3:before {
    content:"("counter(headnum, upper-latin)")";
    counter-increment: headnum;
}
h3.numbered {
    counter-reset: mynum;
    border-top: 1px solid gray;
    text-align: center;
}
p.numbered:before {
    content: counter(mynum)": ";
    counter-increment: mynum;
    font-weight: bold;
}

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no margin around the elements */
  top: 0px; /* distance from top */
  left: 0px; /* distance from left */
}

#forward {
  color: blue;
}

#back {
  color: red;
}

JavaScript

t