JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz" />
<div class="ramka">
  <br>
  <div class="pole3"><i class="fa fa-gift" aria-hidden="true"></i>	</div>
<div class="charakterystyka">
Otrzymujesz: <br>
4 PUNKTY DO STATYSTYK<br><br>
		Otrzymane punkty możesz rozdysponować wedle uznania. Wprowadzone zmiany powinny zostać uwzględnione w niezbędniki; punktacja umiejętno
		Wesołych Świąt!<br><br>
  </div>
</div>

CSS

.ramka {
  width: 500px;
  padding: 0px;
  background-color: #1F1E1D;
  border-top: 5px solid #131311;
  border: 1px solid #131311;
  font-family: 'Calibri';
  color: #696664;
  font-size: 14px;
	}
  .pole3 {
    padding: 5px;
    margin-bottom: 4px;
    font-size: 43px;
    text-align: center;
    font-family: 'Yanone Kaffeesatz';
    color: #8E8A86;
    letter-spacing: 1px;
  }
  .charakterystyka {
    width: 480px;
    background-color: #1F1E1D;
    padding: 5px;
    font-size: 14px;
    text-align: center;
    font-family: 'Calibri';
    color: #696664;
    letter-spacing: 1px;
  }
  label .fa {
    font-size: 1.3em;
    margin: 0 0.4em 0 0;
  }