JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="http://web-hebergement.net/js/liteaccordion.jquery.js"></script>
<div id="slideshow">
            <div id="accordion" class="slideshow-accordion home">
            <ol>
                <li class="slide01">
                    <div class="trigger"><span>1.</span></div>
                    <div class="slide">
                        <div class="inner"><h2>Serveur dédié<br />infogéré</h2>
                        <h3><span>Frais d’installation :</span> GRATUITS !</h3>
                        <p>
                            <span>serveurs de dernière génération</span>
                            <span>installation et configuration<br />des logiciels LAMP</span>
                            <span>monitoring et intervention 24h/24</span>
                            <span>assistance et conseils</span>
                            <a href="<?php echo Page::getBaseUrl(); ?>presentation">En savoir plus</a>
                        </p></div>
                    </div>
                </li>
                <li class="slide02">
                    <div class="trigger"><span>2.</span></div>
                    <div class="slide">
                        <div class="inner"><h2>Serveurs situés<br />
                        dans les<br /> 
                        datacenters d’OVH</h2>
                        <h3>premier fournisseur européen</h3>
                        <p>
                        <span>un réseau fiable et performant</span>
                        <span>des services redondés par sécurité</span>
                        <span>des temps d’accès optimisés</span>
                        </p></div>
                    </div>
                </li>
                <li class="slide03">
                    <div class="trigger"><span>3.</span></div>
                    <div class="slide">
                        <div class="inner"><h2>Des équipes d’astreinte<br />pour garantir la<br />disponibilité.</h2>
                        <p>- Monitoring<br />
              ...

CSS

#slideshow {background:url(../images/bgd_slideshow.png) no-repeat left top; padding:6px; margin:-20px 0 0;}
        .slideshow-accordion {height:348px; width:967px;}
            .slideshow-accordion ol { position:relative; overflow:hidden; height:100%;}
.slideshow-accordion > ol > li {}
                .slideshow-accordion .slide {height:100%; position:absolute; top:0; z-index:1; overflow:hidden; color:#373636;}
                    .slideshow-accordion .inner {padding:40px 40px 0 10px; background:#ebf6f8;}
                    .slideshow-accordion .inner h3 { color: #373636; font-family: myriad-pro,sans-serif; font-size: 26px;  font-weight: 500; }
                        .slideshow-accordion .inner h3 span { color: #649f9f; }
                        .slideshow-accordion .inner p span {display:block; background: url(../images/puce_inner.gif) 0 6px no-repeat;  padding: 0 0 0 12px;}
                        .slideshow-accordion .inner p a {display: inline-block; font-size:18px; background:url(../images/puce_readmore.gif) right 50% no-repeat; padding: 0 10px 0 0;}
                    .slideshow-accordion .slide h2 {font-family: myriad-pro,sans-serif; font-weight:300; font-size:48px; line-height:50px;}
                    .slideshow-accordion .slide p {font-family: myriad-pro,sans-serif; font-weight:300; font-size:18px;}
                    .slideshow-accordion .slide a {color:#373636;}
                        
                
                .slideshow-accordion .trigger {margin: 0; z-index: 2; position: absolute; top: 0; left: 0; width:84px; height:348px; display: block; text-align:center; font-family: myriad-pro,sans-serif; font-weight: 900; font-size:40px; color:#373636; cursor:pointer; background:url(http://i.imgur.com/ICMNG.png) no-repeat left 50%!important;}
.slideshow-accordion .selected {background:url(http://i.imgur.com/fh55X.png) no-repeat left 50%!important;}
                    .slideshow-accordion .trigger span {padding:40px 0 0; display:block;}

JavaScript

$('#accordion.home').liteAccordion({cycleSpeed : 6000, headerWidth : 84});