Код:
<!--HTML-->
<center>

<link href='http://fonts.googleapis.com/css?family=Sail' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<style type="text/css">

.loub {
position: relative;  
width: 500px;
height:  400px;
border: 20px solid #CBB9A0;
padding: 10px;
background-image: url(https://40.media.tumblr.com/68b2b919d5b31d9f3d0a13b25dde389f/tumblr_nb3fvhf1tH1st2trho1_500.jpg);
}

.loutabb {float: left;}

.loutabb label {display: block;
width: 50px; text-align: center;
font-family: calibri; 
color: #efefef; margin-right: 5px;
font-size: 8px;
letter-spacing: 1px;
text-transform: uppercase;
background: #2C607F;
padding: 5px;
border: 0px solid #ccc;
position: relative;
top: 5px;
left: 140px;}

.loutabb [type=radio] {
display: none;  
}

.loucontentt {
position: absolute;
top: 55px;
left: 35px;
width: 400px; 
height: 280px;
background: #fff;
padding: 20px;
border: 15px solid #fff;}

.loucontentt a {
font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; }

[type=radio]:checked ~ label {color: #103B38; background-color: #ffffff; border-bottom: 0px solid white; z-index: 2;}

[type=radio]:checked ~ label ~ .loucontentt {
z-index: 1;
}</style><div class="loub">
 
<div class="loutabb">
<input type="radio" id="loutabb-1" name="loutabb-group-1" checked>
<label for="loutabb-1">I.</label>
<div class="loucontentt">
<div style="padding-top: 10px; width: 400px; font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; height: 300px; overflow: auto; text-align: justify; text-transform: lowercase;"> 
<div style="width: 400px; background-color: #2C607F; padding: 15px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; line-height: 100%;  color: #fff;">
Кампа́ри, Campari
 </DIV>
<p>
«<b>Э</b>та добавка в алкогольные напитки как раз и создана для придания выраженного горьковатого привкуса. В барменской практике такие добавки принято называть биттерами. Хотя Кампари и изготавливается из цитрусов и ароматических трав, нельзя сказать, что этот напиток лишен алкогольной составляющей, что добавляет ему особенной изысканности.»<br>
<br><b>Т</b>яжело вывести из равновесия. Но если тебя «завести», то быстро успокоить уже не получится. Правда, в основном, такие люди обладают ровным настроением и мало реагируют даже на сильные эмоциональные потрясения. Характеризуется низким уровнем психической активности, медлительностью, невыразительностью мимики. Ты невозмутим, твои стремления и настроения довольно устойчивы и постоянны. Ты трудно переключаешься с одного вида деятельности на другой и медленно приспосабливаешься к новой обстановке. Ты долго «раскачиваешься», но, если включаешься в работу, то надолго и серьезно. Тебя нелегко вывести из себя, и ты склонен в большей мере следовать принципам, чем чувствам. Своими деловыми качествами ты часто превосходишь людей, не вызывая их зависти и недоброжелательности.<br>
<br><b>М</b>етодичный, внимательный, уравновешенный, миролюбивый, медлительный, задумчивый, спокойный, сдержанный, расслабленный, непреклонный, размеренный, контролирующий себя, мечтательный, любящий рутинный труд, настойчивый, застенчивый.<br>
<br><b>Т</b>ы адекватно себя оцениваешь, иногда склонен несколько занижать свои способности. Скромен, не любишь быть на виду. Уверен в своих силах, без самоуверенности и желания хвастаться своими успехами. От тебя не нужно требовать способностей Юлия Цезаря делать множество дел одновременно. Такие люди, как ты, сначала доводят до конца одну работу и лишь потом, после длительного «включения», приступают к другой. Правда, включившись, работаешь ты с большой самоотдачей, упорно и долго. Тебе сложно не только переключаться с одного вида работ на другой, но и по причине своей замкнутости приспосабливаться к новым людям, быстро налаживать контакты. Предпочитает ровные и спокойные отношения. Друзьям и любимому человеку нужно уметь хорошо считывать твои «зашифрованные» эмоции. Ты влюбчив и привязан к немногочисленным друзьям, способен на сильные чувства, но, даже будучи сильно влюбленным, ярко выражать свои эмоции не станешь.<br>
<br><b>Твои стремления:</b>
<br>- знания; пыльные книжные полки, загромождающие комнату, постоянные вопросы и поиск ответов на них, стремление успеть везде и всюду - всё это только о тебе. Стать лучше всех во всём - это твой девиз!
<br>- богатство; ты просто неутолимый трудоголик. Единственное, что действительно ласкает твой слух - это шелест денег. Главное для тебя это капитал и его увеличение любой ценой.

</div>
</div>
</div>
 
<div class="loutabb">
<input type="radio" id="loutabb-2" name="loutabb-group-1">
<label for="loutabb-2">II.</label>
<div class="loucontentt">
<div style="padding-top: 10px; width: 400px; font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; height: 300px; overflow: auto; text-align: justify;"> 
<div style="width: 400px; background-color: #2C607F; padding: 15px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; line-height: 100%;  color: #fff;">
Гренади́н, Grenadine
 </DIV>
<p>
<b>Л</b>юбой коктейль, в состав которого входит этот сладкий густой сироп, становится чем-то необычайным. Плохо смешивающийся с жидкими компонентами коктейля, он позволяет создавать настоящие произведения искусства. Коктейли с гренадином можно отличить от других даже с закрытыми глазами по сладкому гранатовому или черносмородинному привкусу сиропа.<br>
<br><b>Н</b>изкий уровень психической активности, замедленность движений, сдержанность моторики и речи, быстрая утомляемость. Ты легко раним, склонен глубоко переживать даже незначительные неудачи, но внешне вяло реагируешь на окружающее. Ты придаешь большое значение всему, что тебя касается, и всегда находишь поводы для опасений, прежде всего, обращая внимание на трудности. Ты постоянно наполнен глубокими переживаниями и часто выглядишь озабоченным, недоверчивым, полным сомнений и не расположенным к радости. Обещания даешь неохотно, ибо считает своим долгом их выполнить, но сомневаешься в своих способностях. Сомнения и неуверенность постоянно одолевают тебя, вызывая постоянные отрицательные эмоции. Ты обладаешь слабой нервной системой. Это означает, что такие люди, как ты, с трудом переносят высокую нагрузку, быстро утомляются. Тебя отличает эмоциональная нестабильность: даже небольшое затруднение способно сбить тебя с толку и вызвать серьезные переживания. Ты тонко чувствуешь окружающих людей и внешний мир.<br>
<br><b>П</b>ессимистичный, грустный, серьезный, нервный, погруженный в себя, тихий, сдержанный, замкнутый, задумчивый, требовательный, ранимый, медлительный, мрачный, мыслитель, хорошая память, созерцатель, самоотверженный, безутешный.<br>
<br><b>Т</b>ы живешь напряженной и сложной внутренней жизнью, обладаешь повышенной тревожностью, у тебя чувствительная, ранимая душа, богатое воображение. Ты придаёшь всему большое значение, слов на ветер не бросаешь. Если не можешь сдержать обещание, искренне переживаешь, даже в случае, когда от тебя ничего не зависело. Чтобы справиться со сложностями, обусловленными слабой нервной системой, тебе необходимо повышать уверенность в себе, стараться достичь успеха в любимом деле. У тебя низкая самооценка. Ты стеснительный. Не веришь в удачу, преувеличиваешь свои недостатки, склонен к самоанализу. Ты быстро утомляешься, поэтому при выполнении любой работы тебе необходим частый отдых. Ты медлителен, малейшее затруднение тебя отвлекает. Тебе не интересны другие люди, больше тебя заботит собственный внутренний мир. В коллективе ты необщителен, держишься в стороне, социально пассивен. В общении легко подчиняешься лидеру, не любишь соперничать. С тобой надо быть чуткими, избегать резких слов. Ты преданный друг. В дружбе и любви редко лидируешь. Однолюб.<br>
<br><b>Твои стремления:</b>
<br>- романтика; в твой жизни главное - романтика и любовь. При этом качество преобладает над количеством. 
<br>- семья; пожалуй, самое праведное стремление. Семьянину хорошо, когда всё хорошо в его семье: дружеские отношения, отсутствие разногласий, успех всех родственников и достаток (хотя это не главное). Но любая мелочь может расстроить его. Бизнес и тем более ночная жизнь мало затрагивает таких людей, как ты. Не хочешь думать о хлебе насущном и свято веришь в монологию.
<ul>
<li>
</li>
</ul>

</div>
</div>
</div>
 
<div class="loutabb">
<input type="radio" id="loutabb-3" name="loutabb-group-1">
<label for="loutabb-3">III.</label>
<div class="loucontentt">

<div style="padding-top: 10px; width: 400px; font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; height: 300px; overflow: auto; text-align: justify;"> 
<div style="width: 400px; background-color: #2C607F; padding: 15px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; line-height: 100%;  color: #fff;">
Малибу, Malibu
 </DIV>
<p>
<b>Э</b>то восхитительный ромовый ликер, который поражает своим прекрасным и уникальным вкусом, аромат очень приятный с тропическими нотками и легкими оттенками ананаса, ореха, спелого банана и сочного манго. Вкус очень сладкий с ярко выраженным кокосовым букетом.<br>
<br>Ты человек быстрый, порывистый, резкий, способный отдаваться делу с исключительным воодушевлением и страстностью. Тебе свойственен высокий уровень психической активности, энергичность действий, быстрый темп и сила движений, нетерпеливость. Однако ты неуравновешен, склонен к бурным эмоциональным вспышкам, резким сменам настроения. Ты горяч и вспыльчив, но отходчив и не злопамятен, видя уступчивость. Деятелен, но длительные усилия и напряжение тебя не вдохновляют. Любишь делать и что-либо решать «с наскока». Неуемное честолюбие и гордость лежат в основе твоего стремления к руководству другими. Самолюбив и падок на лесть. Демонстративен и артистичен, однако, встретив отпор, становишься растерянным и злопамятным. Конфликтен и своим поведением часто провоцируешь раздражение со стороны других. Бываешь агрессивным.<br>
<br><b>А</b>ктивный, инициатор, лидер, доминирующий, соперничающий, энергичный, нетерпимый, импульсивный, вспыльчивый, агрессивный, неугомонный, легковозбудимый, нетерпеливый, деятельный, забывчивый, выносливый, шумный, упрямый, сердитый.<br>
<br><b>Т</b>ы легко преодолеваешь трудности, однако неустойчивость мешает быть сдержанным. Вспыльчивость, необузданность и агрессивность – самые заметные черты твоего характера. С тобой лучше не спорить. Однако, такие люди, как ты, очень отходчивы и не могут долго поддерживать конфликт. Тебя легко узнать в толпе. Твои движения напряженные и резкие. Походка быстрая, стремительная. У тебя высокая самооценка. Очень уверен в себе и своих силах, порой самоуверен. Ни в коем случае не показываешь другим свои слабости. Работоспособность крайне неустойчива, зависит от внешних обстоятельств и личного интереса. В работе несдержан, нетерпелив, с трудом перестраивается на новый вид деятельности. Однако, если ты заинтересован, будешь работать упорно, целеустремленно и обязательно достигнешь желаемого результата. По природе общительный, легко идешь на контакт. При этом, обожает лидировать и быть везде первыми. Любишь подчинять и контролировать окружающих, во всех видишь соперников. Стремление к лидерству в сочетании с несдержанностью делает твой характер достаточно тяжелым в общении. Ты не можешь похвастаться большим кругом друзей, однако к тем, кого любишь очень привязан. Дружить с тобой ничуть не легче, чем работать или просто общаться.<br>
<br><b>Твои стремления:</b>
<br>- популярность; разве бывает что-либо интереснее в жизни, чем отдых с друзьями? Разумеется, нет, ответит вам любой мечтатель стать известным на весь Майами. Проблемы с соседями? Только потому, что они не любят слушать музыку по ночам. Приходить на любую вечеринку без приглашения - это реально! Всё для того, чтобы о тебе говорили, везде и всегда. Стать героем в глазах других, вот смысл жизни. 
<br>- удовольствия; то стремление нечто промежуточное между популярностью и любовью. Что нужно для человека стремящегося взять от жизни всё? Уют и тепло, мелкие радости вроде пижамы, (хотя он не будет прочь и от больших). День будет прожит зря, если ты ни с кем не познакомишься. Вылазка ночью в город необходима, как глоток воздуха. Ты далёк от семейных забот. Зачем готовить, если есть ресторан, зачем работать, если есть богатые любовники, зачем жить, если нет удовольствий?
<ul>
<li>
</li>
</ul>

</div>

</div>
</div>

</div></center>