tailwind制作简单的任务管理器
代码语言：html
所属分类：布局界面
代码描述：tailwind制作简单的任务管理器
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>
</head>
<body class="antialiased sans-serif bg-gray-300">
<!-- Alert Box -->
<div class="fixed w-full z-50 flex inset-0 items-start justify-center pointer-events-none md:mt-5" x-data="{
message: '',
showFlashMessage(event) {
this.message = event.detail.message;
setTimeout(() => this.message = '', 3000)
}
}">
<template x-on:flash.window="showFlashMessage(event)"></template>
<template x-if="message">
<div role="alert" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="-translate-y-5 opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100 transform" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0 -translate-y-5" class="w-full px-4 py-4 w-full md:max-w-sm bg-gray-900 md:rounded-lg shadow-lg">
<div class="flex items-center">
<div class="flex-shrink-0 mr-3">
<svg class="h-6 w-6 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>
</div>
<div class="text-gray-200 text-base" x-text="message"></div>
</div>
</div>
</template>
</div>
<!-- /Alert Box -->
<div x-data="app()" x-init="getTasks()" x-cloak class="flex flex-col min-h-screen border-t-8" :class="`border-${colorSelected.value}-700`">
<div class="flex-1">
<!-- Header -->
<div class="bg-cover bg-center bg-no-repeat" :class="`bg-${colorSelected.value}-900`" :style="`background-image: url(${bannerImage})`">
<div class="container mx-auto px-4 pt-4 md:pt-10 pb-40"></div>
</div>
<!-- /Header -->
<div class="container mx-auto px-4 py-4 -mt-40">
<!-- Welcome Page -->
<div x-show="!localStorage.getItem('TG-username')">
<h2 class="font-bold text-blue-400 text-center text-3xl">Welcome to Tasksgram</h2>
<h2 class="text-gray-400 text-center mb-8 text-lg">Simple Kanban Board</h2>
<div class="bg-white rounded-lg p-6 md:p-10 md:max-w-md mx-auto shadow-md">
<label class="text-gray-800 block mb-1 font-bold text-sm tracking-wide">Name</label>
<input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-lg w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" type="text" x-model="username" placeholder="Enter your name and hit enter..." @keydown.enter="if (username == '') { return; } localStorage.setItem('TG-username', username); username = ''">
</div>
</div>
<!-- Settings Page -->
<div x-show.immediate="showSettingsPage == true">
<div x-show.transition="showSettingsPage == true">
<div class="mb-8">
<a href="#" @click.prevent="showSettingsPage = false" class="rounded-lg text-sm px-3 py-2 inline-flex" :class="`text-${colorSelected.value}-500 bg-${colorSelected.value}-800 hover:bg-${colorSelected.value}-700`">← Go Back</a>
</div>
<div class="p-6 bg-white rounded-lg shadow-md md:max-w-4xl" style="min-height: 150px">
<h2 class="font-bold text-gray-800 mb-3 text-2xl">Settings</h2>
<div class="mb-5">
<label class="text-gray-800 block mb-1 font-bold text-sm">Name</label>
<input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-lg w-full md:w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" type="text" x-model="username" placeholder="Enter your name">
</div>
<div class="mb-5">
<div class="flex items-center">
<div>
<label for="colorSelected" class="text-gray-800 block font-bold mb-1 text-sm">Select a theme<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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