JSFiddle - React, Tailwind, and code Playground

by deathhell

HTML

<div ng-app>
    <div ng-controller="MainCtrl" class="wrapper">
        <div class="edit type1" ng-class="{type1: 'active', type2: '', type3: '', '':''}[detail_block]">
            <div class="title">Type 1</div>
            <div class="content"></div>
            <div class="footer">
                <a class="btn" ng-click="hideEditBlock()">Save</a>
            </div>
        </div><!--edit-->
        <div class="edit type2" ng-class="{type1: '', type2: 'active', type3: '', '':''}[detail_block]">
            <div class="title">Type 2</div>
            <div class="content"></div>
            <div class="footer">
                <a class="btn" ng-click="hideEditBlock()">Save</a>
            </div>
        </div><!--edit-->
        <div class="edit type3" ng-class="{type1: '', type2: '', type3: 'active', '':''}[detail_block]">
            <div class="title">Type 3</div>
            <div class="content"></div>
            <div class="footer">
                <a class="btn" ng-click="hideEditBlock()">Save</a>
            </div>
        </div><!--edit-->
        <ul>
            <li ng-repeat="list in list" ng-dblclick="showDetail($index)">
                <div>{{list.name}}</div>
                <div class="description">{{list.description}}</div>
            </li>       
        </ul>
    </div>
</div>

CSS

body{
    background:#333;
}
.btn{
    background:#333;
    color:#fff;
    display:inline-block;
    padding:5px 10px;
    cursor:pointer;
}
.btn:hover{
    background:#111;
}
.wrapper{
    width:320px;
    overflow:hidden;
    height:400px;
    background:#fff;
    position:relative;
}
.edit{
    padding:10px;
    width:300px;
    height:380px;
    position:absolute;
    left:320px;
    top:0;
    background:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    border-left:1px solid #ccc;
}
.edit.active{
    left:0;
}
.type1{
    background:#ffe5e5;
}
.type2{
    background:#fffce5;
}
.type3{
    background:#e9ffe5;
}
.content{
    height:325px;
}
ul{
    padding:0;
    margin:0;
    
}
li{
    list-style:none;
    padding:6px 10px;
    border-bottom:1px solid #ccc;
    cursor:default;
}
li:hover{
    background:#eee;
}
.description{
    font-size:12px;
    color:#999;
}

JavaScript

function MainCtrl ($scope) {
    
    $scope.list = [
        {
            type: 'type1',
            name: 'Jason',
            description: 'jason@gmail.com'
        },
        {
            type: 'type2',
            name: 'Jack',
            description: 'jack@gmail.com'
        },
        {
            type: 'type3',
            name: 'Tom',
            description: 'tom@gmail.com'
        }
    ];
    
    $scope.detail_block="";
    $scope.showDetail=function($index){
    	$type=$scope.list[$index].type;
    	if($type=="type1"){
    		$scope.detail_block="type1";

    	}else if($type=="type2"){
            $scope.detail_block="type2";
    	}else{
    		$scope.detail_block="type3";
    	}
    }
    $scope.hideEditBlock=function(){
        $scope.detail_block="";
    }
}