JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<br>
  <div style="width:960px;margin:50px auto;">
        <div class="bio_placer">
				<div class="bio_pad">
					<img src="http://s11.postimg.org/rhvrtkdwj/200x300_v2.png">
                  <div class="abs_name"> Сабина Шарфуддине</div>
				</div>
				<div class="bio_desc">
					 <span> Достижения</span>

					<ul class="bio_list">
						<li>Кандидат мастера спорта (КМС) по пауэрлифтингу</li>
						<li>Абсолютная чемпионка Алматы по пауэрлифтингу 2010</li>
						<li>2-е место на первенстве Алматы  по жиму лежа 2009</li>
						<li>2-е место на чемпионате РК по жиму лежа 2009</li>
						<li>Кубок РК по бодибилдингу 4- место</li>
					</ul>
				</div>
			</div>
  
  

    
   <div class="bio_placer">
				<div class="bio_pad">
					<img src="http://s20.postimg.org/xsk5z6bv1/farid.png">
                   <div class="abs_name"> Фарид Сайфулин</div>
				</div>
				<div class="bio_desc">
					 <span> Достижения</span>

					<ul class="bio_list">
						<li>Кандидат мастера спорта (КМС) по бодибилдингу</li>
						<li>2-е место на Юниорском чемпионате по бодибилдингу 2009</li>
						<li>1-е место кубок РК по бодибилдингу 2009</li>
						<li>1-е место по бодибилдингу Алматы 2009</li>
						<li>2-е место в первенстве Алматы по жиму лежа</li>
					</ul>

				</div>
			</div>

  </div>

CSS

* {
    padding:0;
    margin:0;
    outline:none;
}
body {
    font-family:'Cuprum', sans-serif;
    font-size:62.5%;
    background:url('http://s20.postimg.org/bfcfcdax5/image.png');
}
a {
    text-decoration:none;
}


.bio_placer {
    float:left;
    width:468px;
   padding:5px;
   background:#fff;
  border:1px solid #f4f4f4;



}
.bio_pad {
  position:relative;
    float:left;
    width:160px;
}

.bio_pad img {
    float:left;
    width:156px;
    border:2px solid #a6ce2c;
    height:236px;
}

.abs_name {
  float:none;position:absolute;bottom:0;font-size:160%;background:#a6ce2c;padding:5px 0;color:#fff;width:146px;width:100%;text-align:center;}


.bio_desc {
    background:#fff;
    padding-left:5px;
    float:left;
    width:303px;
    
}

.bio_desc span {
    display:block;
    font-size:150%;
    padding:5px;
    background:#333;
    color:#fff;
}
.bio_list {
    zoom:1;
    font-size:130%;
    list-style:none;
}
.bio_list li {
    color:#333!Important;
	background: url('http://s20.postimg.org/fn77l4ccp/image.png') 0 8px no-repeat;
    padding:12px 5px 11px 25px;
}