JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
<div class="container content">
    <section id="areas">
        <div class="projects">
            <div class="panel">
                <a class="sectionIllustration computer" href="#"></a>
                <h2>Projects</h2>
                <p>A range of projects I've worked on.</p>
                <a class="btn" href="#" >View Projects<span class="btnArrow"></span></a>
             </div>
        </div>
            
    <div class="blog">
        <div class="panel">
            <a class="sectionIllustration pad"></a>
            <h2>Blog</h2>
            <p>My Personal blog on subjects that interest me.</p>
            <a class="btn" href="#" >My Blog<span class="btnArrow"></span></a>
        </div>
    </div>
    
    <div class="contact">
        <div class="panel">
            <a class="sectionIllustration message"   href="#"></a>
            <h2>Contact</h2>
            <p>Send me an email to get the ball rolling.</p>
            <a class="btn" href="#">Get in contact<span class="btnArrow"></span></a>
        </div>
    </div>	
        
    </section>
    <!-- End #areas -->
</div>
<!-- End container content -->
</body>

CSS

body{
    background-color:#333333;
}
*, *:before, *:after {
    box-sizing: border-box;
}
.container {
    margin: 0 auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 62.5em;
}
.panel {
    background-color: #fff;
    border-radius: 0.625em;
    border-width: 0;
    padding: 30px 10px 30px 10px;
    margin-bottom: 1.875em;
}
#areas p {
	color: #a4a4a4;
	line-height: 1.2em;
}
.blog, .contact, .projects {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 33%;
    float: left;
    text-align: center;
    padding-right: 0.9375em;
    padding-left: 0.9375em;
}
.btn{
font-style: normal;
font-weight: 300;
text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
padding: 15px 15px 15px 15px;
background-color: #0F0F0F;
border: 1px solid #fff;
text-decoration: none;
color: #ffffff;
text-align: center;
display: inline-block;
line-height: 1;
}
#areas > div {
    opacity: 1;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.panel
{
    opacity: .5;
   
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#areas:hover > div:hover .panel
{
    opacity: 1;
    background-color: #ffa;

    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#areas:hover > div:not(:hover) > .panel
{
      opacity: 0.1;   
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}