JSFiddle - React, Tailwind, and code Playground

by saomocari

HTML

<p>
    <a href="#">example</a>
</p>

CSS

p  a{
    width:100px;
    height:100px;
    margin:20px;
    display:block;
    color:#fff;
    border:#ccc solid 1px;
    background-color: #24BFFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    line-height:100px;
    text-align:center;
    text-decoration:none;
}
p a:hover {
    width:150px;
    height:150px;

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

    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o--transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    background-color:#D49FD4;
    line-height:150px;
    text-align:center;
}