JSFiddle - React, Tailwind, and code Playground

by Roger Sanchez

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="http://rawgit.com/nohros/nsPopover/master/src/nsPopover.js"></script>
<link rel="stylesheet" href="https://rawgit.com/nohros/nsPopover/master/example/nsPopover.css">
<html>

  <head>
    <title>Popover Testing</title>
    <script type="text/ng-template" id="close">
      <div class="triangle"> </div>
      <div class="ns-popover-tooltip">
        <ul>
          <li>
            <input class="btn btn-default" type="text" placeholder="Título del botón:" ng-model="btntitle">
          </li>
          <li ng-repeat="item in main.items">
            <button class="btn btn-default" ng-click=''>{{item.name}}</button>
          </li>
        </ul>
        <button ng-click="hidePopover()" class="btn-small btn-default">Borrar</button>
        <button ng-click="done()" class="btn btn-success">Hecho</button>
      </div>
    </script>
  </head>

  <body ng-app="ScotiApp">
    <div ng-controller="MainController as main">

      <div id="content-post">
        <div class="post-head">
          Mensaje
        </div>
        <div class="post-body">
          <div ng-repeat='item in TextItems'>
            <div class="form-group">
              <textarea placeholder="{{txtAddText ? txtAddText : 'Ingrese datos'}}" ng-model='txtAddText' id='item-{{$index}}' class='editable-class input-{{$index}}' rows="4" cols="50"></textarea>
            </div>
            <div ng-repeat='item in BtnTextItems'>
              <button class="btn...

CSS

#content-post {
  flex: 0 0 380px;
  width: 380px;
  max-width: 380px;
  margin: 20px 40px;
  min-height: calc(100vh - 60px) !important;
  background: #fff;
  box-shadow: 0 2px 77px rgba(132, 146, 166, .21);
}

#content-post .post-head {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 60px;
  padding: 0 48px;
  background: #e0e6ed;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

#content-post .post-body {
  padding: 20px 0;
}

#content-post .post-footer {}

/********************************************/

.editable-class {
  will-change: border-color, background-color, box-shadow;
  transition: border-color 0.15s ease 0s, background-color 0.15s ease 0s;
  background-color: rgb(241, 240, 240);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 0.5rem;
  margin: 0px 0px 9px;
  width: 354px;
  height: 111px;
}

.btn-add-new {
  display: block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  color: #8492a6;
  border: 2px dashed #e0e6ed;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  transition: border-color .15s, color .15s;
  will-change: border-color, color;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-top-color: transparent;
}

.btn-add {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 79px;
  margin: 4px;
  background-color: #fff;
  color: #8492a6;
  border: 2px dashed #e0e6ed;
  border-radius: 15px;
  will-change: border-color, color;
  transition: border-color .15s, color .15s;
  text-align: center;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.btn-add i {
  font-size: 25px
}

.btn-add span {
  display:...

JavaScript

var ScotiApp = angular.module('ScotiApp', ['nsPopover']);
ScotiApp.controller('MainController', function($scope, $timeout) {

  /*$scope.$watch("btntitle", function (newValue, oldValue) {
        $scope.updated_info = "xD";
    });*/

  $scope.btntitle = "";
  $scope.TextItems = [];
  $scope.ImageItems = [];
  $scope.CardItems = [];
  $scope.GalleryItems = [];

  $scope.BtnTextItems = [];

  $scope.newitem = '';
  $scope.txtAddText = 'Ingrese texto';

  $scope.addTextBtn = function() {
    if ($scope.BtnTextItems.length < 3) {
      $scope.BtnTextItems.push($scope.BtnTextItems.length);
    }
  }

  $scope.addText = function() {
    if ($scope.TextItems.length < 10) {
      $scope.TextItems.push($scope.TextItems.length);
    }
  }
  $scope.addImage = function() {
    if ($scope.ImageItems.length < 10) {
      $scope.ImageItems.push($scope.ImageItems.length);
    }
  }
  $scope.addCard = function() {
    if ($scope.CardItems.length < 10) {
      $scope.CardItems.push($scope.CardItems.length);
    }
  }

  $scope.delText = function(i) {
    $scope.TextItems.splice(i, 1);
  }
  $scope.delImage = function(i) {
    $scope.ImageItems.splice(i, 1);
  }
  $scope.delCard = function(i) {
    $scope.CardItems.splice(i, 1);
  }

  $scope.delBtnText = function(i) {
    $scope.BtnTextItems.splice(i, 1);
  }


  this.items = [{
    name: "Enviar mensaje"
  }, {
    name: "Abrir hipervinculo"
  }];

  $('#example').popover();
});