JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>poc</title>
  <meta charset="utf-8">
  
  <style type="text/css">
  	
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li p {
		margin: 0;
		padding: 0;
	}
	.ecomm-date-picker {
		width:100%;
	}
	.ecomm-date-picker .date-picker-dates {
	
	}
	.ecomm-date-picker .date-picker-dates .date-container {
			display: inline-block;	
			width: 504px;
			overflow:hidden;
			position: relative;
	}
	
	.ecomm-date-picker .date-picker-dates .date-container ul{
			position: relative;
			width: 2016px;
	}
	.ecomm-date-picker .date-picker-dates li {
		display: inline-block;
		width: 78px; /* for mobile 130*/
		height: 78px;
		border: 1px solid #b3b3b3;
		text-align:center;	
		margin: 0 2px 0 2px;
	}
	.ecomm-date-picker .date-picker-dates li p.day{
		padding-top: 15px;
		font-size: 12px;
	}
	
	.ecomm-date-picker .date-picker-dates li p.date{
		font-size: 30px;
	}
	
	.ecomm-date-picker .left {
		background:	url("http://placehold.it/23x80") no-repeat center;
		width: 23px;
		height: 80px;
		display: inline-block;
		cursor: pointer;
	}
	
	.ecomm-date-picker .right {
		background:	url("http://placehold.it/23x80") no-repeat center;
		width: 23px;
		height: 80px;
		display: inline-block;
		cursor: pointer;
	}
  </style>

  <script>
	// 84 px width with margin and etc
	
  </script>
</head>

<body>

<div class="ecomm-date-picker">
    <div class="date-picker-month">
        <span class="">January</span>
        <span class="hidden">February</span>
    </div>
    
    <div class="date-picker-dates">
	<div class="left"></div>
	<div class="date-container">
        <ul class="test">
            <li>
                <p class="day">Monday</p>
                <p class="date">29</p>
            </li><li>
                <p class="day">Tuesday</p>
                <p class="date">30</p>
            </li><li>
                <p class="day">Wednesday</p>
                <p...