JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- ISSUE in Safari -->
<div class="main">
		<div class="left"></div>
		<div class="wrap"><ul>
		    <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		            <li><p class="one">1</p><p class="two">two</p></li>
		        </ul>    
		    </div>
		    <div class="right"></div>
</div>

CSS

*{
		    margin: 0;
		    padding:0;
		}
		.main {
		    overflow: hidden;
		}
		.wrap {
		    display: inline-block; 
		    width: 210px;
		    overflow:hidden;
		}
		ul {
		    font-size:0;   
		    white-space: nowrap;
		}
		p {
		    font-size: 16px;
		    display:block;
		}
		p.one{
			padding-top: 15px;
			font-size: 12px;
		}
		
		p.two{
			font-size: 30px;
		}
		li {
		    list-style:none;
		    width:68px;
		    height:68px;
		    display: inline-block;
		    background-color: green;
		    border: 1px solid #fff;    
		}
		
		.left, .right {
		    width:20px;
		    height:70px;
		    display:inline-block;
		    background-color: grey;
		}