JSFiddle - React, Tailwind, and code Playground

by tobint

HTML

<!doctype html>
<html>
<head>
    <title>Transparency</title>
</head>
<body>

<div id="container">
    <div class="sample opacity">
        <div class="content">Opacity affects children</div>
    </div>

    <div class="sample alpha">
        <div class="content">Alpha doesn't affect children</div>
    </div>

</div>

</body>
</html>

CSS

#container {
        margin: 10px;
        padding: 20px 0px 20px 20px;
        background-image: -ms-linear-gradient(left, 
                rgb(27, 117, 187) 0%, 
                rgb(255, 255, 255) 5%, 
                rgb(27, 117, 187) 10%, 
                rgb(255, 255, 255) 15%, 
                rgb(27, 117, 187) 20%, 
                rgb(255, 255, 255) 25%, 
                rgb(27, 117, 187) 30%, 
                rgb(255, 255, 255) 35%, 
                rgb(27, 117, 187) 40%, 
                rgb(255, 255, 255) 45%, 
                rgb(27, 117, 187) 50%, 
                rgb(255, 255, 255) 55%, 
                rgb(27, 117, 187) 60%, 
                rgb(255, 255, 255) 65%, 
                rgb(27, 117, 187) 70%, 
                rgb(255, 255, 255) 75%, 
                rgb(27, 117, 187) 80%, 
                rgb(255, 255, 255) 85%, 
                rgb(27, 117, 187) 90%, 
                rgb(255, 255, 255) 95%, 
                rgb(27, 117, 187) 100%
                ); 
        height: 150px;
        width: 350px;
        overflow:hidden;
    }
    .sample {
        width: 130px;
        height: 130px;
        float: left;
        padding: 10px;
        margin-right: 20px;
        text-align: center;
    }
    .opacity {
        background-color: rgb(177, 177, 177);
        border: 1px solid rgb(255, 255, 255);    
        opacity : .5;
    }
    .alpha {
        background-color: rgba(177, 177, 177, .5);
        border: 1px solid rgba(255, 255, 255, .5);
    }
    .content {
        background-color: #ffffff;
        width: 130px;
        height: 130px;
    }