JSFiddle - React, Tailwind, and code Playground

by sudakoff

HTML

<div class="content1">
  
  <p102>Пользователи</p102>
  
<div class="toggler1">
...
</div></div>

<div class="content2">

<p103>Добавить фильм</p103>

<div class="toggler2">
...
</div></div>

CSS

.content1{background:url(../img/ruk.png) no-repeat;width:150px;height:100px;position:fixed;top:290px;left:2%;text-align:center;}
   .toggler1 {display:none;position:fixed;z-index:1000;background-color:rgb(245,245,245);left:0px;padding-left:10px;}
   .content1:hover .toggler1 {display:block;position:fixed;z-index:1000;width:370px;box-shadow:2px 2px 4px rgb(175,175,175);top:120px;}
 

   .content2{background:url(../img/ruk.png) no-repeat;width:150px;height:100px;position:fixed;top:320px;text-align:center;}
   .toggler2 {display:none;position:fixed;z-index:1000;background-color:rgb(245,245,245);left:0px;text-align:center;}
   .content2:hover .toggler2 {display:block;position:fixed;z-index:1000;width:370px;box-shadow:-2px 2px 4px rgb(175,175,175);top:300px;}