JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        
    </head>
    
    <body>
        <div id="callout"><a href="#">link to moodle</a></div>
        <div id="callout"><a href="#">link to page2</a></div>
        <div id="callout"><a href="#">link to page3</a></div>
        <div id="callout"><a href="#">link to page4</a></div>
        <div id="callout"><a href="#">link to page5</a></div>
        <div id="callout"><a href="#">link to page6</a></div>
    </body>
</html>

CSS

#callout{
    display:block;
    width:140px;
    height:30px;
    margin-left:-120px;
    background:#CCC;
    border:thin groove black;
    -webkit-transition: margin-left 0.75s ease-in-out;
}

#callout a{
    display:block;
}

#callout:hover{
    margin-left:-1px;
}