JSFiddle - React, Tailwind, and code Playground

by orthosie

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <div class="panel panel-default">
                <div class="panel-image hide-panel-body ">
                    <img src="https://theysaidso.com/i/image/f0SkwIudEB_j52yPPf813AeF" class="panel-image-preview" />
                </div>
                <div class="panel-body">
                    <h4>Yogi Bhajan</h4>
                    <p>You are very powerful, provided you know how powerful you are.</p>
                </div>
                <div class="panel-footer text-center social">
                    <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftheysaidso.com/quote/Ft0K6U7kE58thGtmeRKM3geF" target="_blank"><span class="fa fa-facebook"></span></a>
                    <a href="https://twitter.com/share?url=http%3A%2F%2Ftheysaidso.com/quote/Ft0K6U7kE58thGtmeRKM3geF" target="_blank"><span class="fa fa-twitter"></span></a>
                    <a href="https://www.linkedin.com/shareArticle?url=http%3A%2F%2Ftheysaidso.com/quote/Ft0K6U7kE58thGtmeRKM3geF" target="_blank"><span class="fa fa-linkedin"></span></a>
                    <a href="https://plus.google.com/share?url=http%3A%2F%2Ftheysaidso.com/quote/Ft0K6U7kE58thGtmeRKM3geF" target="_blank"><span class="fa fa-google-plus"></span></a>
                    <a href="https://theysaidso.com/quote/Ft0K6U7kE58thGtmeRKM3geF" title="Go to quote page for You are very powerful,..."><span class="glyphicon glyphicon-bookmark"></span></a>
                    <a href="https://theysaidso.com/i/f0SkwIudEB_j52yPPf813AeF" title="Go to the image page to view and share"><span class="glyphicon glyphicon-picture"></span></a>
                                    </div>
            </div>

CSS

.panel {
    margin-bottom:20px;
    background-color:#fff;
    border:1px solid  transparent;
    border-radius:4px;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);
    box-shadow:0 1px 1px rgba(0,0,0,0.05)
}
.panel-body{
    padding:0px;
    margin:0;
}
.panel-body:before,
.panel-body:after {
    display:table;content:" "
}
.panel-body:after{clear:both}
.panel-body:before,.panel-body:after{display:table;content:" "}.panel-body:after{clear:both}

.panel-image img.panel-image-preview {
    width: 100%;
    border-radius: 4px 4px 0px 0px;
}

.panel-heading ~ .panel-image img.panel-image-preview {
	border-radius: 0px;
}

.panel-image ~ .panel-body, .panel-image.hide-panel-body ~ .panel-body {
	overflow: hidden;
}
.panel-image ~ .panel-footer a {
	padding: 0px 10px;
	font-size: 1em;
	color: rgb(100, 100, 100);
}

.panel-footer {
    background-color:#ccc;
    margin-top: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.panel-image ~ .panel-footer a:hover {
   color: rgb(00, 108, 227);
}
.panel-image.hide-panel-body ~ .panel-body {
	height: 0px;
	padding: 0px;
}

.panel-image  { overflow: hidden; }
.panel-image { display: block; margin: 0; width: 100%; height: auto; 
    transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -o-transition: all 0.5s; 
}