JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="wrapper">
						<div class="left-icon"></div>
						<div class="dates">
							<div class="date-container"><ul>
									<li data-month="January"><p class="day">Tuesday</p><p class="date">16</p></li>
									<li data-month="January"><p class="day">Wednesday</p><p class="date">17</p></li>
									<li data-month="January"><p class="day">Thursday</p><p class="date">18</p></li>
									<li data-month="January"><p class="day">Friday</p><p class="date">19</p></li>
									<li data-month="January"><p class="day">Saturday</p><p class="date">20</p></li>
									<li data-month="January"><p class="day">Sunday</p><p class="date">21</p></li>
									<li data-month="January"><p class="day">Monday</p><p class="date">22</p></li>
									<li data-month="January"><p class="day">Tuesday</p><p class="date">23</p></li>
									<li data-month="January"><p class="day">Wednesday</p><p class="date">24</p></li>
									<li data-month="January"><p class="day">Thursday</p><p class="date">25</p></li>
									<li data-month="January"><p class="day">Friday</p><p class="date">26</p></li>
									<li data-month="January"><p class="day">Saturday</p><p class="date">27</p></li>
									<li data-month="January"><p class="day">Sunday</p><p class="date">28</p></li>
									<li data-month="January"><p class="day">Monday</p><p class="date">29</p></li>
									<li data-month="January"><p class="day">Tuesday</p><p class="date">30</p></li>
									<li data-month="January"><p class="day">Wednesday</p><p class="date">31</p></li>
									<li data-month="February"><p class="day">Thursday</p><p class="date">1</p></li>
									<li data-month="February"><p class="day">Friday</p><p class="date">2</p></li>
									<li data-month="February"><p class="day">Saturday</p><p class="date">3</p></li>
									<li data-month="February"><p class="day">Sunday</p><p class="date">4</p></li>
									<li data-month="February"><p class="day">Monday</p><p class="date">5</p></li>
									<li...

CSS

ul {
    list-style-type: none;
}
.dates {
    display: inline-block;    
}
.date-container {
    
}
.date-container ul {
    		position: relative;
		margin: 0;
		white-space: nowrap;
    	overflow: auto;
    	overflow-y: hidden;
    	width: 504px; /* 84 px for one date */
    	-webkit-overflow-scrolling: touch;
    	list-style-type: none;
    width: 228px;
    
}
li {
    width:78px;
    height:78px;
    border: 1px solid #000;
    display: inline-block;
}
.left-icon, .right-icon {
    width:20px;
    height:80px;
    background-color: green;
    display: inline-block;
}