JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="clearfix">
  <div class="sample" OnClick="a();">вариант1</div>
  <div class="sample" OnClick="b();">вариант2</div>
  <div class="sample" OnClick="c();">вариант3</div>
  <div class="sample" OnClick="d();">вариант4</div>
</div>
<div id="infoBlock">
  <div id="infoBlock_img"></div>
  <div id="infoBlock_text"></div>
</div>
<div>
Продолжение Продолжение Продолжение
</div>
<script language="javascript">
	function a()
    {document.getElementById('infoBlock').style.display='block';
  document.getElementById('infoBlock_img').style.background='url(http://i.casamea.ru/u/pic/dc/768a763b4111e7bca7dd55d79a2385/-/%D0%93%D1%80%D0%B8%D0%B1%20%D0%B1%D0%B5%D0%BB%D1%8B%D0%B9%20%D0%BE%D0%B4%D0%B8%D0%BD%20%28%D0%BC%D0%B0%D0%BB%D1%8B%D0%B9%29.jpg) 50% 50%/60% no-repeat';
    document.getElementById('infoBlock_text').innerHTML = 'Очень много интересного текста про грибы Очень много интересного текста про грибы';
    }
    function b() 	      {document.getElementById('infoBlock_img').style.background='url(http://i.casamea.ru/u/pic/8e/7f160c3b4211e7ade89873022099bb/-/%D0%93%D1%80%D0%B8%D0%B1%20%D0%B1%D0%B5%D0%BB%D1%8B%D0%B9%20%D0%BE%D0%B4%D0%B8%D0%BD%20%28%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B8%D0%B9%29.jpg) 50% 50%/60% no-repeat';
    document.getElementById('infoBlock_text').innerHTML = 'Очень много интересного ДРУГОГО текста про грибы';}  
    function c() 	      {document.getElementById('infoBlock_img').style.background='url(http://agrarian-blog.ru/wp-content/uploads/2016/12/polskiy-grib.jpg) 50% 100%/65% no-repeat';
    document.getElementById('infoBlock_text').innerHTML = 'Очень много интересного текста про грибы Очень много интересного текста про грибыОчень много интересного текста про грибы Очень много интересного текста про грибы';}  
    function d() 	      {document.getElementById('infoBlock_img').style.background='url(http://agrarian-blog.ru/wp-content/uploads/2016/12/podberyozovik.jpg) 50% 100%/65%...

CSS

.sample{
  width: 120px;
  height: 120px;
  background: grey;
  text-align:center;
  float: left;
  text-transform: uppercase;
    line-height: 120px;
    margin-right: 20px;
    font-size: 12px;
    cursor: pointer;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#infoBlock{
  width:540px;
  height:200px;
  margin-top: 20px;
  background-color: blanchedalmond;
  display:none;
  -webkit-transition: display 0.5s;
     -moz-transition: display 0.5s;
     -o-transition: display 0.5s;
     transition: display 0.5s;
}
#infoBlock_img{
  width:270px;
  height: 200px;
  float:left;
}

#infoBlock_text{
  padding:30px 20px 30px 0px;
}