JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<body>
  <div id="root">
    <header class="main-head">Header</header>
    <nav>
      <ol>
        <li><a href="#"> <span class="step"><span> Step-1</span></span></a></li>
        <li><a href="#"> <span class="step"><span> Step-2</span></span></a></li>
      </ol>
    </nav>
    <main>
      <h1 class=" h1">What??</h1>
      <p class=" p" style="
    overflow-wrap: break-word;
">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla vulputate accumsan. Curabitur iaculis leo et sem fringilla ullamcorper. Etiam iaculis tortor sagittis ipsum vulputate, ut dapibus diam venenatis. Donec viverra erat vel tincidunt cursus. Aliquam pellentesque maximus lorem, ut ullamcorper purus ultricies id. Etiam eu porta erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum eleifend porta neque. Sed iaculis quis nibh tristique convallis. Duis tincidunt interdum sem, ac eleifend justo accumsan ac. Morbi dapibus justo semper vestibulum accumsan. Sed diam mauris, pretium vel lacus ultrices, elementum dapibus risus. Morbi porta metus eget finibus imperdiet.

Nullam lacinia interdum posuere. Donec pulvinar elementum nulla id aliquam. Ut sagittis quis velit a dapibus. In vestibulum eu enim non ultricies. Phasellus tempor odio nibh, nec condimentum lacus vulputate sit amet. Curabitur sit amet augue dignissim, maximus massa id, congue lectus. Mauris eu iaculis turpis, sit amet lobortis ligula. Fusce tempus gravida consequat. Fusce nec faucibus dui, vitae consequat lectus. Mauris a ultricies risus. Donec eget sem dolor.

Vivamus ullamcorper massa lorem, eu aliquam arcu varius eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum risus lacus, a sodales risus rutrum eu. Curabitur nec ligula tristique, hendrerit nulla quis, iaculis purus. Nam ac euismod erat. Quisque nec diam sit amet ipsum dictum consequat. Nulla non nulla eleifend, tincidunt ante eu, bibendum...

CSS

body {
    color: #5c5c5c;
    font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
    overflow: hidden;
    box-sizing: border-box;
}

#root {
    display: grid;
    grid-template-areas: 'header header header' 'nav content content' 'footer footer footer';
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    height: 100vh;
}

header,
footer {
    grid-area: header;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);
    color: #3c4043;
    height: 64px;
    padding: 0 16px;
    display: grid;
    place-items: center;
    font-size: 2rem;
}

nav {
    grid-area: nav;
    margin-left: 0.5rem;
    width: 20rem;
}

ol {
    margin: 0;
    padding: 16px 12px;
    counter-reset: li-count;
    list-style: none;
    overflow-x: visible;
    overflow-y: auto;
}

ol li[completed] .step:before {
    background-color: #1a73e8;
    color: #fff;
}

ol li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #80868b;
    padding: 3px 10px;
    min-height: 48px;
    font-weight: 400;
    line-height: 20px;
    box-sizing: content-box;
    position: relative;
    font-family: Roboto, Noto, sans-serif;
    transition: all 0.3s ease-in-out;
    border: 1px solid #dadce0;
    border-radius: 5px;
    margin: 6px 0;
    background: #fff;
}

.step {
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #80868b;
    padding: 3px 10px;
    min-height: 48px;
    font-weight: 400;
    line-height: 20px;
    box-sizing: content-box;
    position: relative;
    font-family: Roboto, Noto, sans-serif;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    margin: 6px 0;
    background: #fff;
}

ol li {
    display: block;
    counter-increment: li-count;
}

ol li .step:before {
   ...