JSFiddle - React, Tailwind, and code Playground

by jon64digital

HTML

<div class="mainLayout" ng-app>
    
    
    <!-- Main Panel -->
    <div class="mainBody">
        
        <div ng-controller="MainCtrl" class="mainView viewPeopleCompanies">
        
            
            <!-- Main Content -->    
            <div class="mainViewContent">
            
                <!-- Conversation Cards -->
                <div class="conversationCards">
                        
                    <div ng-repeat="message in data.messages" ng-class="message.type" class="conversationCard">
                        <div class="info">
                            <div class="type"></div>
                            <div class="from">From Avatar</div>
                            <div class="createdBy">Created By Avatar</div>
                            <div class="arrowTo">
                                <div class="arrow"></div>
                                <div class="to">To Avatar</div>
                            </div>
                            <div class="date">
                                <div class="day">25</div>
                                <div class="month">Dec</div>
                            </div>
                        </div>
                        <div class="main">
                            
                            <div class="content">
                                <div class="heading2">{{message.title}}</div>
                                <div ng-bind-html="message.content"></div>
                            </div>
                            
                        </div>
                        
                        <br />
                        <hr />
                        <br />
                        
                    </div>
                
                </div>

            </div>
        </div>
        
    </div>
</div>

JavaScript

/* Controllers */

function MainCtrl($scope) {

    
    /* Create dummy data */

    $scope.data = {}

    $scope.data.messages = [
        {
            "type" : "phone",
            "date" : "25/12/2012",
            "time" : "11.34",
            "createdBy" : {
                "name" : "Jenny Forster",
                "avatarFileName" : "jenny-forster.jpg"
            },
            "from" : {
                "name" : "Jenny Forster",
                "avatarFileName" : "jenny-forster.jpg"
            },
            "to" : {
                "name" : "Daniel Craig",
                "avatarFileName" : "daniel-craig.jpg"
            },
            "title" : "This is the title of a phone call"
        },
        {
            "type" : "email",
            "date" : "25/12/2012",
            "time" : "11.34",
            "createdBy" : {
                "name" : "Jenny Forster",
                "avatarFileName" : "jenny-forster.jpg"
            },
            "from" : {
                "name" : "Daniel Craig",
                "avatarFileName" : "daniel-craig.jpg"
            },
            "to" : {
                "name" : "Jenny Forster",
                "avatarFileName" : "jenny-forster.jpg"
            },
            "title" : "This is the title of an email"
        },
        {
            "type" : "meeting",
            "date" : "25/12/2012",
            "time" : "11.34",
            "createdBy" : {
                "name" : "Jenny Forster",
                "avatarFileName" : "jenny-forster.jpg"
            },
            "title" : "This is the title of a meeting"
        },
        {
            "type" : "note",
            "date" : "25/12/2012",
            "time" : "11.34",
            "createdBy" : {
                "name" : "Jenny Forster",
                "avatarFileName" : "jenny-forster.jpg"
            },
            "title" : "This is the title of a note"
        }
    ]

}