JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<div class='editBlock'>


<div class='individualBlock'>
   <div class=''>
    Brightness
  </div>
  
  <div class="ui slider range">
		<input type="range" />
	</div>
  </div>
 
  
    <div class='individualBlock'>
   <div class=''>
    Opacity
  </div>
  
  <div class="ui slider range">
		<input type="range" />
	</div>
  </div>
 
  
    <div class='individualBlock'>
   <div class=''>
    Filter
  </div>
  
  <div class="ui slider range">
		<input type="range" />
	</div>
  </div>
 
  
    <div class='individualBlock'>
   <div class=''>
    Lorem epsum
  </div>
  
  <div class="ui slider range">
		<input type="range" />
	</div>
 
 
  </div>
  </div>

CSS

.lightEditBtn:hover .editBlock{
  max-height:500px;
  min-height:35px;

}
.editBlock{
  max-height:0;
  
  transition: 1s ease-in ;
  border:1px solid red;
}

.ui.slider.range input[type="range"] {
			-webkit-appearance: none;
			border-width: 1px;
			border-style: solid;
			border-radius: 50rem;
			border-color: rgba(0, 0, 0, 0.1);
			padding: 3px 5px;
      outline:none;
    
		}
		.ui.slider.range input[type="range"]::-moz-range-track {
			background: none;
			border: none;
		}
		.ui.slider.range input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			background: #89B84C;
			border-radius: 50rem;
			height: 0.7em;
			width: 0.7em;
		}
		.ui.slider.range input[type="range"]::-moz-range-thumb {
			background: #89B84C;
			border-color: #89B84C;
			border-radius: 50rem;
			height: 0.7em;
			width: 0.7em;
		}