JSFiddle - React, Tailwind, and code Playground

by Marie GĂ©rard

HTML

<div id="competences">
				<div id="div" tabindex="0">
					<h4>div 1</h4>
					<ul>
						<li>one</li>
						<li>two</li>
						<li>three</li>
						<li>four</li>
					</ul>
				</div>
				
			</div>

CSS

#competences{/* background-color:rgb(8,196,93); */ width:830px; margin:0 auto; color:rgb(0,0,0); padding:0.8em; border-radius:10px; font-size:0.85em; }

#div{position:absolute; font-family:'Museo'; width:260px; border-radius:10px; padding:0.5em; overflow:hidden; height:1.3em; cursor:pointer;}

#div:hover, 
#div:focus{background-color:rgb(38,38,40); color: rgb(255,255,255);  transition:background 0.5s ease, color 0.5s ease;}
#div:active, 
#div:focus {height:6.7em; transition:height 0.3s ease; z-index:3;}


#competences h4{font-size:1em; text-transform:uppercase; text-align:center; margin:0 0 0.5em 0;}
#competences ul{margin:0; list-style:none; padding-left:0.4em;}