JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<div class="container"> 
  
  <header class="header">
  <h1 class="headertext">
   <img src="http://s32.postimg.org/mnf77ikld/tweetbirdy.png" alt="" class="profile">
   <td>Twitter </td>
  </h1>
  </header>
 <section class="intro">
    <div class="wholebox">
  <h1>
   <img class="twitimg" src="http://i68.tinypic.com/2m5e2hy.png" alt="">
   <td class="@name">@name</td>
   <td class="date">11. mai</td>
  </h1>
<h2 class="box">
   <img src="http://i68.tinypic.com/2ylu4x3.png" alt="" class="profile2">
 <td class="date">texte text text etxtet example texttexte text text etxtet example texttexte text text etxtet etxtet example texttexte ample text texte text text etxtet example texttexte text tex</td>
  </h2>
    </div>
    </section>

CSS

body {
	font-family: "Helvetica Neue";
	margin: 0;
  backgroung: transparent;
}
/* Container */
.container {
	width: 100%;
	background-color: transparent;
}

/* Header */
header {
	width: 100%;
	height: 4%;
	background-color: #60A6DB;
}
.headertext {
	color: #ffffff;
	font-weight: normal;
	margin-left: auto;
	letter-spacing: 3px;
	margin-right: auto;
	text-align: left;
	padding-top: 5px;
  padding-left: 30px;
	line-height: 2em;
	font-size: 13px;
}
.box {
	color: #444444;
	font-weight: normal;
	margin-left: auto;
	letter-spacing: 0px;
	margin-right: auto;
	text-align: left;
	line-height: 2em;
	font-size: 13px;
  background-color:#fff;
}
.twitimg {
	width: 5%;
  padding: 0px 0px 0 0;
  vertical-align: middle;
  line-height: 100px;
  
}
.@name {
	color: #000;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-top: 5px;
  padding-left: 20px;
	line-height: 2em;
	font-size: 13px;
}
.date {
	color: #fff;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-top: 5px;
  padding-left: 20px;
	line-height: 2em;
	font-size: 13px;
}
.intro {
	background-color: #FFFFFF;
	width: 33%;
  height: 40%;
}
.wholebox {
	width:100%;
	text-align: left;
  padding-left: 30px;
	background-color:#fff;
	float: left;
}
.intro .column h3 {
	color: #000;
	text-align: center;
}
.intro .column p {
	color: #000;
}

.intro .column p {
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 20px;
	margin-right: 20px;
	width: 80%;
	margin-top: 4%;
}
.intro {
	display: inline-block;
	background-color: #f3f3f3;
  height: 200px;
  width: 400px;
}
.profile {
	width: 3%;
  padding: 0px 0px 0 0;
}
.profile1 {
	width: 5%;
  padding: 0px 0px 0 0;
  vertical-align: middle;
  line-height: 100px;
  color:#000;
  
}
.profile2 {
	width: 18%;
  padding: 0px 0px 0 0;
  vertical-align: middle;
  line-height: 100px;
  color:#000;
  
}
/* Mobile */
@media (max-width: 320px)...

JavaScript

<section class="intro2">
    <div class="textbox">
<h2 class="box">
 <td class="date">textbox</td>
  </h2>
    </div>
    </section>