JSFiddle - React, Tailwind, and code Playground

by maxx0r

HTML

<div id="circle-wrapper">
    <div class="top"></div>
    <div class="bottom"></div>    
    <div class="content">
        <ul>
            <li>
                Pizzarave
                <span class="date">13 maart</span>
            </li>
            <li>
                Pizzarave
                <span class="date">13 maart</span>
            </li>
            <li>
                Pizzarave
                <span class="date">13 maart</span>
            </li>
            <li>
                Pizzarave
                <span class="date">13 maart</span>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    background:#f9f0ea;
}
#circle-wrapper div.top {
    border-radius:250px 250px 0 0 ;
    border-bottom:1px solid #222;

}
#circle-wrapper div.bottom {
    
    border-radius:0 0 250px 250px;
    //background:orange;
    transform-origin:top center;
    
      box-shadow: 18px 8px 12px #ccc
    transform:rotateX(180deg);
    -webkit-animation:tumbleDown 1200ms 0ms 1 forwards cubic-bezier(.24,.5,.65,.97);
    
}
#circle-wrapper {
    width:500px;
    position:relative;
    display:block;
    height:500px;
    margin:0 auto;        
}
div.top,  div.bottom{
    width:500px;
    height:250px;
    background:#140f0f;
} 

@-webkit-keyframes tumbleDown {
    0% {
         transform:rotateX(180deg);   
    }
    0% {
         transform:rotateX(90deg);   
    }
    100% {
         transform:rotateX(0deg);   
    }
}
.content {
   width: 443px;
  border-radius: 50%;
  height: 500px;
  color: #f9f0ea;
  position: absolute;
  top: 0;
  padding-top: 98px;
  left: 22px;
    z-index:2;
  opacity:0;
  -webkit-animation:showblock 1500ms 1s forwards;
}
.content ul {
    margin:0;
}
.content ul li {
    list-style:none;
    padding:10px 0 15px 0;
    margin:0;
    border-bottom:1px solid #f9f0ea;
    
}

@-webkit-keyframes showblock{
    from { 
        opacity:0;
    }
    to {
        opacity:1;
    }
}