JSFiddle - React, Tailwind, and code Playground

by TerryJuneJr

HTML

<!DOCTYPE html>

<html>
    <head>
        <!-- YOLO -->
    </head>

    <body>
        <div class="container">
            <div class="logo">
                <!-- My Logo -->
            </div>
        </div>
    </body>
</html>

CSS

.logo {
    border: 5px solid #333333;
    border-radius: 50%;

    display: block;
    content: " ";

    cursor: pointer;

    position: relative;

    -webkit-transition: all 0.75s ease-in-out;
    -moz-transition: all 0.75s ease-in-out;
    -o-transition: all 0.75s ease-in-out;
    -ms-transition: all 0.75s ease-in-out;
    transition: all 0.75s ease-in-out;

    height: 48px;
    width: 48px;
}

.logo:hover {
    border-color: #00bfff;

    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.logo:before {
    border-top: 35px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 25px solid #333333;

    display: block;
    content: " ";

    position: absolute;
    top: -10px;
    left: 10px;

    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);

    height: 0;
    width: 0;
}

.logo:after {
    border-top: 0px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 25px solid #333333;

    display: block;
    content: " ";

    position: absolute;
    bottom: -10px;
    left: 15px;

    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);

    height: 0;
    width: 0;
}