JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<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">
                        A1
                        <div class="footer">more</div>
                        <div class="dialog-modal" title="Basic modal dialog">
                            
                            <div id="accordion">
                                <h3><a href="#">Section A1</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>
                                    
                                </div>
                           ...

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
            });
        }
    });

    

});

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

$(function() {
    $(".footer").each(function() {
        
        var target = null;
        $(this).click(function() {
            target = $(this).parent();
            $(target , '.dialog-modal').dialog('open');
        });
        
        } 
    
    );

});

$(function() {
    $(".dialog-modal").each(function() {

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

});