JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Cuprum:400,700&amp;subset=latin,cyrillic-ext"></script>
<br>
<br>
<div class="bio_placer">
    <div class="bio_pad">
        <img src="http://s11.postimg.org/rhvrtkdwj/200x300_v2.png">
    </div>
    <div class="bio_desc">
         <h3 class="bio_name">Сабина Шарфуддине</h3>
         <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>

CSS

* {
    padding:0;
    margin:0;
    outline:none;
}
body {
    color:#333;
    font-family:'Cuprum', sans-serif;
    font-size:62.5%;
}
a {
    text-decoration:none;
}
.bio_placer {
    float:left;
    width:458px;
    padding:5px;
    border:1px solid #eee;
}
.bio_pad {
    float:left;
    margin-right:20px;
    width:200px;
}
.bio_pad img {
    float:left;
    width:196px;
    border:2px solid #a6ce2c;
    height:298px;
}
.bio_desc {
    float:left;
    width:238px;
    
}
h3.bio_name {
    font-weight:lighter!Important;
    font-size:250%;
    color:#a6ce2c;
    padding:10px 0 0 0;
}
.bio_desc span {
    display:block;
    font-size:150%;
    padding:5px 0;
    color:red;
}
.bio_list {
    zoom:1;
    font-size:130%;
    list-style:none;
}
.bio_list li {
    padding:5px 10px 15px 20px;
}