JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=" //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div class="model-sidebar">
    <div class="container">
        <div class="row">
        <div class="col-md-1">
            <ul class="no-style">
                <li><button title="Text" class="btn btn-default"><i class="fa fa-text-width"></i></button></li>
                <li><button title="rectangle" class="btn btn-default"><i class="fa fa-square"></i></button></li>
                <li><button title="Circle" class="btn btn-default"><i class="fa fa-circle"></i></button></li>
                <li><button title="Triangle" class="btn btn-default"><i class="fa fa-exclamation-triangle"></i></button></li>
                <li><button title="Line" class="btn btn-default"><i class="fa fa-arrows-v"></i></button></li>
            </ul>
        </div>
        <div class="col-md-7">
            <button>Import SVG</button>
            <button>Save</button>
            <button>I'm done!</button>
            <button>export as IMG</button>
            <button>export as JSON</button>
            <button>export as SGV</button>
            canvas
        </div>
        <div class="col-md-4">
             <h6>controlles</h6>
            
            
<button class="btn btn-danger">Clear canvas</button>
<button class="btn btn-danger">Remove selected object/group</button>

<button class="btn btn-warning">Lock horizontal movement</button>
<button class="btn btn-warning">Lock vertical movement</button>
<button class="btn btn-warning">Lock horizontal scaling</button>
<button class="btn btn-warning">Lock vertical scaling</button>
<button class="btn btn-warning">Lock rotation</button>

<h6>Origin X:</h6>
<button>Left</button>   
<button>Center</button>   
<button>Right</button>  

<h6>Origin...

CSS

ul.no-style{
    margin:0;
    padding:0;
    list-style-type:none;
}