JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div id="container" style="width: 800px">
    
    <div id="content">
        
        
        <div class="tag_page_header_wrapper">
            <div class="tag_page_header">
                <h1 class="dashboard_header">
                    box test
                </h1>
                
            </div>
        </div>
        
        <!-- Right column -->
        <div id="right_column">
            <!-- Track this tag -->
            
            <!-- Featured blog -->
            coucou
            <!-- Contributors -->
            
            <!-- Tracked tags -->
            
            <!-- Related tags -->
            
        </div>
        
        <!-- Left column -->
        <div id="left_column">
            <ol id="posts">
                
                <!-- START POSTS -->
                
                <!-- END POSTS -->
            </ol>
            <ul class="column">
                <!--Repeating list item-->
                <li>
                    <div class="block" id="AA">
                        Twitter
                        <div class="footer">more</div>
                    </div>
                </li>
                <li>
                    <div class="block" id="AA">
                        Pubsub
                        <div class="footer">more</div>
                        <div class="box-more">
                            <h3><a href="#">more</a></h3>
                            <div>
                                <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                                
                                <p>It is important to mention that the...

CSS

#dialog-modal { font-size: 12px; }


div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
div.cols2 {float: left; width: 150px; height: 150px; margin: 0 3px 0 0; padding: 0; background: white;}


ul.column{
    width: 100%;
    padding: 0;
    margin: 10px 0;
    list-style: none;
}
ul.column li {
    float: left;
    width: 200px; /*Set default width*/
    padding: 0;
    margin: 5px 0;
    display: inline;
}
.block {
    height: 200px;
    font-size: 1em;
    margin-right: 10px; /*Creates the 10px gap between each column*/
    padding: 20px;
    background: #e3e1d5;
}
.block h2 {
    font-size: 1.8em;
}
.block img {
    /*Flexible image size with border*/
    width: 89%;  /*Took 1% off of the width to prevent IE6 bug*/
    padding: 5%;
    background:#fff;
    margin: 0 auto;
    display: block;
    -ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}


.ombrage { 
    border: 5px solid #fff; 
    -moz-box-shadow: 8px 8px 12px #aaa;  
    -webkit-box-shadow: 8px 8px 12px #aaa;  
    box-shadow: 8px 8px 12px #555;  
}  

div.footer {
        width: 75px;
        height: 75px;
        position: absolute;
        display: block;
        right: 0;
        bottom: 0;
        background-color: #bcd5e6;
        text-align: center;
    }

JavaScript

$(function() {
    $("#dialog-modal").dialog({
        height: 400,
        width: 400,
        modal: true,
        autoOpen: false,
        open: function() {
            $("#accordion").accordion({
                collapsible: true,
                active: -1,
                autoHeight: false
            });
        }
    });

    $('#create-user').click(function() {
        $('#dialog-modal').dialog('open');
    });

});

$(function() {
    $(".box-more").accordion({
        collapsible: true,
        active: -1 /* permet de ne pas ouvrir le div*/
    });
});


    $(function() {
        function position( using ) {
            
        var target = $( ".footer" ).parent();
            $( ".footer" ).position({
                //of: $( "#AA" ),
                of: target,
                my: "right bottom",
                at: "right bottom"
            });
        }

        $( ".footer" ).css( "opacity", 0.5 );

        position();
    });