JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<html>
<head></head>
<body>
<div>sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj sdlfkjsdlfkjsldkfj...

CSS

.go-up {

    top: 35%;
    right: 20px;
    z-index: 10;

}

 .go-up span {

    display: block;
    width: 16px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

}

.go-up {
    position: fixed;
    right: 15px;
    z-index: 9999;
    background: #f3e8ca;
    border-radius: 25px;
    cursor: pointer;
    width: 48px;
    height: 48px;

}

.icon::before {

    display: block;
    background-repeat: no-repeat;

}
.icon_menu-mark-down::before {
content: '';
    left: 0;
    -webkit-transform: skew(0deg,-50deg);
    -moz-transform: skew(0deg,-50deg);
    -ms-transform: skew(0deg,-50deg);
    -o-transform: skew(0deg,-50deg);
    transform: skew(0deg,-50deg);

}

.icon_menu-mark-down::after, .icon_menu-mark-down::before {
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
    position: absolute;
    top: 0;
    height: 6px;
    width: 50%;
    background: #c73728;
}



 .icon_menu-mark-down::after {
content: '';
    -webkit-transform: skew(0deg,50deg);
    -moz-transform: skew(0deg,50deg);
    -ms-transform: skew(0deg,50deg);
    -o-transform: skew(0deg,50deg);
    transform: skew(0deg,50deg);

}
.icon_menu-mark-down::after {
    right: 0;
}

.go-up:hover .icon_menu-mark-down_arrow::after, .go-up:hover .icon_menu-mark-down_arrow::before {

    background: #c73728;

}
 .go-up:hover {
opacity:0.8!important;
    background: #f3e8ca;

}

JavaScript

$(document).ready(function(){$(function(){function e(e){$("#totoTop").show().animate({opacity:0.5},"slow")}function t(){return $(window).scrollTop()>250}var i=$("#totoTop");i.hide().css({opacity:0});var o=0;t()&&(o=1,e()),$(window).scroll(function(){t()?0==o&&(i.stop(!0,!1),o=1,e()):1==o&&(i.stop(!0,!1),o=0,function(e){e.animate({opacity:0},"slow",function(){e.hide()})}(i))}),i.click(function(){$("html, body").animate({scrollTop:0},"fast")})})})