JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://googledrive.com/host/0B2fOP9oGbP_bTDJkeVJ5NmxXRU0/droid.css">
<div class="box-a3pbox">
<span class="box-a3pheader"> تحميل القالب </span>
<div class="tombolbox-a3p">
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى<br/>
        </p>
    <a href="http://arabic3professional.blogspot.com/" title="تحميل القالب" target="_blank">
    <span class="box-a3p">تحميل القالب</span></a>
</div>
    </div>

CSS

.box-a3pbox{
    font-family: "Droid_Sans_Arabic";
    position:relative;
    width:256px;
    height:auto;
    position:fixed;
    bottom:0;
    left:60px;
    
}
.tombolbox-a3p{
    text-align:center;
    text-decoration:none;
    width:240px;
    height:auto;
    background:#555;
    padding:5px 5px 15px;
    display:none;
    border: 3px solid #F84D4D;
}
.box-a3p{
    background:#fff;
    border:0;
    margin:0 auto;
    padding:5px 18px;
    font-size:18px;
    font-weight:700;
    color:#333;
    text-align:center;
    display:inline-block;
    border-radius:3px;
    border: 2px solid #F84D4D;
    transition:background-color 0.6s ease-out 0.6s;
}
.box-a3p:hover{
    background:#F84D4D;

}
.box-a3pheader{
    background:#F84D4D;
    border-radius:3px 3px 0 0;
    margin:0 auto;
    padding:8px 23px;
    font-size:18px;
    font-weight:700;
    color:#fff;
    text-align:center;
    display:block;
    cursor:pointer;
}
.tombolbox-a3p a{
    text-decoration:none;
}
.tombolbox-a3p p{
    color:#ddd;
    font-size:14px;
    margin:5px 0 10px;
}

JavaScript

jQuery(document).ready(function($) {
    $(".box-a3pheader").click(function() {
        $(".tombolbox-a3p").slideToggle(500);
    });
});