JSFiddle - React, Tailwind, and code Playground

HTML

<input type=checkbox id='inp' />
<div ng-app="myApp" ng-controller="myCtrl">
    
    <div>Show:
        <div class="check-element animate-show"> <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.</div>
    </div>
    
    Click me:
        <label for='inp'>[_]</label>
    <br/>
</div>

CSS

div[ng-app~="myApp" ]{
    background: yellow;
}

.animate-show {

    line-height:20px;

    opacity:1;

    padding:10px;

    border:1px solid black;

    background:white;

}

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active {

    -webkit-transition:all linear 0.5s;

    transition:all linear 0.5s;

}

.check-element {

    padding:10px;

    border:1px solid black;

    background:white;

    display:none;
}
#inp{display:none}
#inp:checked + div{
    margin-top:50px;
}
#inp:checked + div > div > div{
    display:block;
}
#inp:checked + div > label{
    background-color:green;
}
label{
    background-color:red;
}

JavaScript

angular.module('myApp', [])
.controller('myCtrl', function ($scope) {});