JSFiddle - React, Tailwind, and code Playground

by marcelow

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div class="content">
<div class="box editor">
    <ul>
        <li><span>box name</span></li>
        <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
        <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
        <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
        <li class="box">
            <ul>
                <li><span>box name</span></li>
                <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
                <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
                <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
                <li class="box">
                    <ul>
                        <li><span>box name</span></li>
                        <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
                        <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
                        <li class="component"><i class="icon icon-edit"></i><span class="title">component name</span><button class="btn">edit</button></li>
                    </ul>
                </li>
                <li class="box">
                    <ul>
                        <li><span>box name</span></li>
                        <li class="component"><i class="icon icon-edit"></i><span class="title">component...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.content{margin:20px;}
.editor {background:#f9f9f9;padding:10px;border-radius:3px;border:1px solid #ddd;}
.editor ul {list-style-type: none;}
.editor .box .editor.box{}
.editor .component{background:#ddffaa;border-radius:3px;border:1px solid #ddd;margin:5px 0;padding:5px 10px;}
.editor .component i{vertical-align:middle;}
.editor .component .title{margin:0 5px;vertical-align:middle;}
.editor .component button{margin:0 10px;vertical-align:middle;}