JSFiddle - React, Tailwind, and code Playground

by kangismet

HTML

<div class="Blog">
<div clas='has-comment'>
Test aja
saasasklaksla ooioqiq pokipqiqiepqoepqiepqkas
dsdas
dsdsad
</div>
</div>

CSS

.Blog .has-comment{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;z-index:55;-webkit-transition:all .2s ease;transition:all .2s ease;overflow-y:auto;opacity:0;visibility:hidden;display:none}
.commentBallon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:80px;z-index:56;border-radius:50%;background-color:#555;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
.Blog .commentBallon svg{fill:#fefefe}
.Blog .commentBallon svg.line{fill:none;stroke:#fefefe}
.Blog .commentBallon .svg-2{display:none;width:20px;height:20px}
.Blog .comment-show:checked ~ .has-comment{opacity:1;visibility:visible}
.Blog .comment-show:checked ~ .commentBallon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.Blog .comment-show:checked ~ .commentBallon .svg-1{display:none}
.Blog .comment-show:checked ~ .commentBallon .svg-2{display:block}
.Blog .commentSection{width:100%;max-width:820px;padding:0 20px;margin-left:auto;margin-right:auto}
.dark-mode .comments, .dark-mode .has-comment{background-color:#000}