JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<footer>
<div class="container-fluid">
  <div class="row">

    <div class="col-md-3 col-sm-3 pad">
      <img src="img/footer.png" class="img_footer img-responsive" alt="" />
    </div>
      <div class="col-md-9 col-sm-9">
      <div class="flex-item">
         <p class="apropos text-justify">A Propos</p>

            <p class="text_footer text-justify">
            Créée en zzrklzkrjzqlqzjflq zedokq zd^q zcw qsmldkqzmdk qzmdpzqùdp qzmdkqzmdkzqmdkqmz lqmzkmqqkzmdqmkzdqmqmqmqzkmzqzdkmqzdqodzmoz</p>
      </div>
   
          </div>
     
        </div>
      </div>
              
            
            <a href="contact.html" class="arrow_footer">Nous contacter<i class="icon-right-circle"></i></a>
  <footer>

CSS

footer
 {
 width:100%;
 height:100%;
 background-color: #009900;
 position: relative;
 }

.test
{
 position: relative;
}
.img_footer
{
 height:100%;
}
.apropos, .text_footer, .arrow_footer
{
  color:white;
}
.flex-item {
  display: flex;
  padding-bottom: 20px;
}
.apropos
{
 font-weight: bold;
 font-size: 28px;
 text-transform: uppercase;
 width: 175px;
}
.pad
{
 padding:0;
}
.arrow_footer
{ 
position: absolute;
bottom:0;

    text-align: right;
    width: 100%;
  font-weight:500;
  font-size:24px;
  text-transform: uppercase;
  text-decoration: none;
  padding-right: 10px;
  }
  .contact_text
  {
   text-decoration: none;

   }
  .text_footer
  {
   margin-top:50px;
    max-width: 300px;
  }