tailwind实现pc后台仪表盘表格表单图文卡片效果代码
代码语言：html
所属分类：布局界面
代码描述：tailwind实现pc后台仪表盘表格表单图文卡片效果代码
代码标签： tailwind pc 后台 仪表盘 表格 表单 图文 卡片
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.0.7.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/simplemde.min.css">
<style>
/* apply full height on html body elements */
.hover tr:hover {
background: rgba(241, 245, 248,.5);
}
table tr th:last-child,
table tr td:last-child{
text-align: right;
}
/* only show buttons on hover */
table tr button {
visibility:hidden;
}
table tr:hover button {
visibility:initial;
}
input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
-webkit-appearance: listbox;
height: 35px;
}
#chart {
width: 100%;
height: auto;
margin:0;
}
</style>
</head>
<body >
<div class="font-sans">
<header class="fixed pin w-full h-16 z-20 flex">
<div class="w-1/5 xl:w-1/6 border-b border-grey-darker items-center flex text-white">
<div class="ml-4"><svg class="h-6" viewBox="0 0 209 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-2" transform="translate(1.000000, 0.000000)">
<text id="JACKAL-CMS" font-family="AlwynNew-Medium, Alwyn New" font-size="24" font-weight="400" letter-spacing="1.99999988" fill="#FFFFFF">
<tspan x="54.3040006" y="30">JACKAL</tspan>
<tspan x="150.016" y="30" font-family="AlwynNew-Regular, Alwyn New" font-weight="normal"> </tspan>
<tspan x="157.776" y="30" font-family="AlwynNew-Light, Alwyn New" font-weight="300">CMS</tspan>
</text>
<g id="Group" stroke="#2EABDB">
<polygon id="Path" points="23.0140845 23.1 8 37 43 39"></polygon>
<polygon id="Path-2" points="-3.55271368e-15 0 23.0140845 23.1 8 37"></polygon>
<polygon id="Path-3" points="23.0140845 23.1 39.3661972 23.1 43 39"></polygon>
<polygon id="Path-4" points="24.2253521 23.1 33.0070423 0 39.3661972 23.1"></polygon>
</g>
</g>
</g>
</svg></div>
</div>
<div class="w-4/5 xl:w-5/6 bg-white border-b items-center flex">
<ul class="list-reset flex ml-4 text-sm">
<li class="mr-6">
<a class="text-blue hover:text-blue-darker no-underline" href="#">Active</a>
</li>
<li class="mr-6">
<a class="text-blue hover:text-blue-darker no-underline" href="#">Link</a>
</li>
<li class="mr-6">
<a class="text-blue hover:text-blue-darker no-underline" href="#">Link</a>
</li>
<li class="mr-6">
<a class="text-grey-light cursor-not-allowed no-underline" href="#">Disabled</a>
</li>
</ul>
<button class="bg-transparent text-grey hover:text-grey-dark text-sm rounded inline-flex items-center text-sm absolute pin-t pin-b pin-r mr-4">
<span class="text-sm">Logout</span>
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
</button>
</div>
</header>
<div class="wrapper flex min-h-screen">
<nav class="sidebar bg-blue-darkest w-1/5 xl:w-1/6">
<div class="pt-24 fixed w-1/5 xl:w-1/6">
<ul class="sidebar-nav list-reset w-full">
<li class="sidebar-nav__item block"><a href="#" class="no-underline uppercase tracking-wide text-xs font-bold text-white block p-4 bg-blue-darker border-l-4 border-blue-dark">cards</a></li>
<li class="sidebar-nav__item block"><a href="#" class="no-underline uppercase tracking-wide text-xs font-bold text-white block p-4 hover:bg-blue-darker">tables</a></li>
<li class="sidebar-nav__item block"><a href="#" class="no-underline uppercase tracking-wide text-xs font-bold text-white block p-4 hover:bg-blue-darker">forms</a></li>
</ul>
</div>
</nav>
<div class="main w-4/5 xl:w-5/6 bg-grey-lighter">
<div class="container">
<div class="p-8 mt-12">
<h1 class="text-xl font-light">Cards</h1>
<hr class="border-t my-2">
<!-- some grid items -->
<div class="flex -mx-2 my-4 flex-wrap">
<div class="w-1/3 px-2 mb-4">
<div class="rounded bg-white shadow min-h-12 h-full">
<img class="rounded-t w-full" src="//repo.bfw.wiki/bfwrepo/image/62be28fc221f0.png" alt="">
<div class="p-4 flex-col">
<h4 class="mb-2 text-grey-darkest">filename</h4>
<!-- <p class="text-xs leading-tight text-grey-dark">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem laborum tempore. Earum quidem architecto quasi officiis veritatis quo laudantium?</p> -->
<hr>
<div class="inline-flex relative w-full">
<button class="bg-blue hover:bg-blue-dark text-white uppercase tracking-wide text-xs font-bold border border-blue py-2 px-3 rounded">Preview</button> <button class="bg-transparent hover:bg-blue-lightest border border-blue text-blue uppercase tracking-wide text-xs font-bold py-2 px-3 rounded ml-1">Edit</button>
<button class="bg-transparent text-grey hover:text-grey-dark text-sm rounded inline-flex items-center absolute pin-t pin-b pin-r">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</button>
</div>
<hr>
<small class="text-xs text-grey-dark">Added: 19 Aug 2019</small>
</div>
</div>
</div>
<div class="w-1/3 px-2 mb-4">
<div class="rounded bg-white shadow min-h-12 h-full">
<img class="rounded-t w-full" src="//repo.bfw.wiki/bfwrepo/image/62be28fc221f0.png" alt="">
<div class="p-4">
<h4 class="mb-2 text-grey-darkest">filename</h4>
<hr>
<div class="inline-flex relative w-full">
<button class="bg-blue hover:bg-blue-dark text-white uppercase tracking-wide text-xs font-bold border border-blue py-2 px-3 rounded">Preview</button>
<button class="bg-transparent hover:bg-blue-lightest border border-blue text-blue uppercase tracking-wide text-xs font-bold py-2 px-3 rounded ml-1">Edit</button>
<button class="bg-transparent text-grey hover:text-grey-dark text-sm rounded inline-flex items-center absolute pin-t pin-b pin-r"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
</div>
<hr>
<small class="text-xs text-grey-dark">Added: 19 Aug 2019</small>
</div>
</div>
</div>
<div class="w-1/3 px-2 mb-4">
<div class="rounded bg-white shadow min-h-12 h-full">
<img class="rounded-t w-full" src="//repo.bfw.wiki/bfwrepo/image/62be28fc221f0.png" alt="">
<div class="p-6">
<h4 class="mb-2 text-grey-darkest">Card heading</h4>
<!-- <p class="text-xs text-grey-dark">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam dolorem laborum tempore. Earum quidem architecto quasi officiis veritatis quo laudantium, repellendus esse non?</p> -->
<hr>
<small class="text-xs uppercase text-grey-dark">19 Aug 2019</small>
</div>
</div>
</div>
<div class="w-1/3 px-2 mb-4">
<div class="rounded bg-white flex shadow min-h-12 h-full">
<div class="p-4 flex-col w-1/2">
<h4 class="mb-2 font-normal text-sm text-grey-darkest">Properties</h4>
<h2 class="font-mono text-grey-dark">556</h2>
<hr>
<small class="text-xs text-green">⬆ 2.38%</small>
</div>
<div class="flex p-4 w-1/2 items-center">
<div id="chart1">
</div>
</div </div>
</div>
</div>
<div class="w-1/3 px-2 mb-4">
<div class="rounded bg-white flex shadow min-h-12 h-full">
<div class="p-4 flex-col w-1/2">
<h4 class="mb-2 font-normal text-sm text-grey-darkest">Views</h4>
<h2 class="font-mono text-grey-dark">3,356</h2>
<hr>
<small class="text-xs text-green">⬆ 15.38%</small>
</div>
<div class="flex p-4 w-1/2 items-center">
<div id="chart5">
</div>
</div </div>
</div>
</div>
<div class="w-1/3 px-2 mb-4">
<div class="rounded bg-white flex shadow min-h-12 h-full">
<div class="p-4 flex-col w-1/2">
<h4 class="mb-2 font-normal text-sm text-grey-darkest">New leads</h4>
<h2 class="font-mono text-grey-dark">156</h2>
<hr>
<small class="text-xs text-green">⬆ 5.38%</small>
</div>
<div class="flex p-4 w-1/2 items-center">
<div id="chart3">
</div>
</div </div>
</div>
</div>
</div>
<div class="">
<h1 class="text-xl font-light">Forms</h1>
<hr class="border-t my-2">
<div class="rounded bg-white shadow">
<div class="p-8">
<form class="w-full max-w-lg text-sm">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
First Name
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-2 px-3 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
<p class="text-red text-xs italic">Please fill out this field.</p>
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
Last Name
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-last-name" type="text" placeholder="Doe">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
Password
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-password" type="password" placeholder="******************">
<p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-search">
Search
</label>
<div class="relative">
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 mb-3 pl-8 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-search" type="search" placeholder="Type a location or postcode...">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search absolute pin-t pin-l pin-b w-4 ml-2 mt-1 text-grey-dark"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
City
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-city" type="text" placeholder="Central London">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
County
</label>
<div class="relative">
<select class="block appearance-none w-full bg-grey-lighter border border-grey-light text-grey-darker py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-state">
<option>Soho</option>
<option>Victoria</option>
<option>Mayfair</option>
</select>
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
<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>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
Postcode
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-zip" type="text" placeholder="SW1">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
Date
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-city" type="date" placeholder="date">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
Month
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-city" type="month" placeholder="Month">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
Time
</label>
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-city" type="time" placeholder="Month">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-2/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
Checkboxes & Radials
</label>
<div class="flex w-full flex-wrap my-4">
<label class="flex-inline mr-2">
<input class="text-lg" type="checkbox">
<span class="text-sm text-grey-darker">
Send me your newsletter!
</span>
</label>
<label class="flex-inline mr-2">
<input class="text-lg" type="checkbox">
<span class="text-sm text-grey-darker">
Checkbox
</span>
</label>
<label class="flex-inline mr-2">
<input class="text-lg" type="checkbox">
<span class="text-sm text-grey-darker">
Checkbox
</span>
</label>
</div>
<div class="flex w-full flex-wrap my-4">
<form class="flex-inline" action="">
<input class="flex-inline mr-1" type="radio" name="gender" value="male"> <span class="text-sm text-grey-darker mr-2">Radio 1</span><br>
<input class="flex-inline mr-1" type="radio" name="gender" value="male"> <span class="text-sm text-grey-darker mr-2">Radio 2</span><br>
<input class="flex-inline mr-1" type="radio" name="gender" value="male"> <span class="text-sm text-grey-darker mr-2">Radio 3</span><br>
</form>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<div class="overflow-hidden relative">
<button class="bg-blue hover:bg-blue-dark text-white uppercase tracking-wide text-xs font-bold border border-blue py-2 px-3 rounded inline-flex items-center focus:outline-none">
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
<span>Upload Files</span>
</button>
<input class="cursor-pointer absolute block opacity-0 pin-r pin-t z-10" type="file" name="vacancyImageFiles" @change="fileName" multiple>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-search">
Textarea
</label>
<textarea class="text-sm appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" placeholder="Type your message..." rows="5"></textarea>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-search">
WYSIWYG Area
</label>
<textarea id="wysiwyg" class="text-sm appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-light rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" placeholder="Type your message..." rows="5"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="pt-8">
<h1 class="text-xl font-light">Tables</h1>
<hr class="border-t my-2">
<div class="rounded bg-white shadow">
<div class="p-8">
<table class="text-left w-full text-sm hover">
<thead class="uppercase tracking-wide text-grey-darker text-xs font-bold">
<tr>
<th class="p-3">Property Name</th>
<th class="p-3">Property Address</th>
<th class="p-3">Postcode</th>
<th class="p-3">Actions</th>
</tr>
</thead>
<tbody class="text-grey-darker text-sm">
<tr>
<td class="p-3 border-bottom border-t border-grey-light">Property Names</td>
<td class="p-3 border-bottom border-t border-grey-light">Address 1, Address 2, Address 3</td>
<td class="p-3 border-bottom border-t border-grey-light">OX14 3HN</td>
<td class="p-3 border-bottom border-t border-grey-light">
<button class="bg-transparent text-grey hover:text-grey-dark text-sm rounded inline-flex items-center mr-2"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0