JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="content">
<h3>Ankieta</h3>
</div>
</div><!-- /container -->
<div class="container">
<div class="content">
<form action="" method="post">
<div class="question">
<div class="question-header">Dane osobowe</div><!-- /question-header -->
<div class="question-body">
<input name="Imię" placeholder="Imię">
<input name="Nazwisko" placeholder="Nazwisko">
</div><!-- /question-body -->
</div><!-- /question -->
<div class="question">
<div class="question-header">Wybierz płeć</div><!-- /question-header -->
<div class="question-body">
<input type="radio" name="Płeć" value="Mężczyzna"> Mężczyzna
<input type="radio" name="Płeć" value="Kobieta"> Kobieta
</div><!-- /question-body -->
</div><!-- /question -->
<div class="question">
<div class="question-header">Pytanie 1. Ile masz lat?</div><!-- /question-header -->
<div class="question-body">
<p><input type="radio" name="Wiek" value="mniej niż 15">Mniej niż 15</p>
<p><input type="radio" name="Wiek" value="15-19">15-19</p>
<p><input type="radio" name="Wiek" value="20-29">20-29</p>
<p><input type="radio" name="Wiek" value="30-39">30-39</p>
<p><input type="radio" name="Wiek" value="40-60">40-60</p>
<p><input type="radio" name="Wiek" value="więcej niż 60">Więcej niż 60</p>
</div><!-- /question-body -->
</div><!-- /question -->
<div class="question">
<div class="question-header">Pytanie 2. Jakiej przeglądarki internetowej używasz?</div><!-- /question-header -->
<div class="question-body">
<select name="Przeglądarka">
<option selected="selected">Google Chrome</option>
<option>Firefox</option>
<option>Internet Explorer</option>
<option>Opera</option>
<option>Inna</option>
</select>
</div><!-- /question-body -->
</div><!-- /question -->
<div class="question">
<div class="question-header">Pytanie 3. Z...
CSS
/* Main
============================================================================= */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
background-color: #fff;
}
.container {
margin: 0 auto;
width: 980px;
}
.content {
margin: 0 auto;
background-color: #F0F0F0;
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
/* Typography
============================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: 'Helvetica Neuee', sans-serif;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 12px;
}
/* Question
============================================================================= */
.question {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
border-color: #ddd;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.question-header {
padding: 10px 15px;
border-bottom: 1px solid transparent;
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.question-body {
padding: 15px;
}