neisdev

Angular Drag-Drop FormBuilder

Demo drag-drop form-builder with native html5 drag drop and anglar ui sortable directive.

A card pattern for a user dashboard using flexbox for grid layout. Keyboard accessible, a11y friendly, and built using Progressive Enhancement.

	<body class="bg-grey-light font-sans">
	<div class="bg-white">
	<div class="container mx-auto flex flex-col lg:flex-row items-center py-4">
	<nav class="w-full lg:w-2/5">
	<a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-home fa-lg"></i> Home</a>
	<a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-bolt fa-lg"></i> Moments</a>
	<a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-bell fa-lg"></i> Notifications</a>
	<a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid bord

	<!--js xor no-js -->
	<main class="js">

	<section class="aw-header bg-white border-b border-gray-200 shadow-md">
	<header class="container mx-auto flex items-center justify-between flex-wrap px-2 py-4 lg:p-6 ">
	<div id="mobile-menu__toggler" class="block lg:hidden">
	<button id="mobile-menu__open" class="px-3 py-1 w-20 border rounded text-white bg-purple-700 border-transparent hover:bg-purple-900 transition">
	Menu
	</button>
	<button id="mobile-menu__close" class="hidden px-3 py-1 w-20 border rounded text-white bg-purple-700 border-transparent hover:bg-purple-900 transition">

	<div class="p-10">

	<div class="dropdown inline-block relative">
	<button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
	<span class="mr-1">Dropdown</span>
	<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
	</button>
	<ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
	<li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">One</a></li>
	<li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>

	<div class="accordion flex flex-col items-center justify-center h-screen">
	<!-- Panel 1 -->
	<div class="w-1/2">
	<input type="checkbox" name="panel" id="panel-1" class="hidden">
	<label for="panel-1" class="relative block bg-black text-white p-4 shadow border-b border-grey">Panel 1</label>
	<div class="accordion__content overflow-hidden bg-grey-lighter">
	<h2 class="accordion__header pt-4 pl-4">Header</h2>
	<p class="accordion__body p-4" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur
	adipisicing elit. Lorem ipsum dolor sit amet.</p>
	</div>

	<body class="bg-cream text-charcoal min-h-screen font-sans leading-normal overflow-x-hidden lg:overflow-auto">
	<main class="flex-1 md:p-0 lg:pt-8 lg:px-8 md:ml-24 flex flex-col">
	<section class="bg-cream-lighter p-4 shadow">
	<div class="md:flex">
	<h2 class="md:w-1/3 uppercase tracking-wide text-sm sm:text-lg mb-6">Create New Location</h2>
	</div>
	<form>
	<div class="md:flex mb-8">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Location</legend>

	h3 React Image Preview & Upload Component
	div#mainApp
	div.centerText
	span Checkout associated
	a(href="http://www.hartzis.me/react-image-upload/" target="_blank") blog post

	<h3>Tags input with flexbox & javascript(IE9 inline-block)</h3>
	<form action="" class="test" method="post">
	<label for="exist-values">Exist values
	<input type="text" id="exist-values" class="tagged form-control" data-removeBtn="true" name="tag-2" value="PC,Play Station 4,X-BOX One" placeholder="Add Platform">
	</label>
	<button type="submit" name="button">Send</button>
	</form>
	<button id="destroy">destroy</button>
	<button id="add">add tags</button>
	<button id="addArr">add tags array</button>

	<div class="menu-btn">
	<i class="fas fa-bars fa-2x"></i>
	</div>

	<div class="container">
	<!-- Nav -->
	<nav class="main-nav">
	<img src="https://i.ibb.co/wwLhz98/logo.png" alt="Microsoft" class="logo">

	<ul class="main-menu">