JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div id="root">
  
</div>

SCSS

@charset "UTF-8";

$z-index: (
  top              : 200
);

@function z-index($key) {
    @return map-get($z-index, $key);
}


%ir {
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
}

p {
    margin: 0;
}

.todoZone {
    $inpBoxHeight: 40px;
    $importantColor: #fa7a02;
    padding-top: $inpBoxHeight;

    .inpBox {
        z-index: z-index(top);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: $inpBoxHeight;
        padding: 0 80px;
        box-sizing: border-box;

        select {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 100%;
            // border-radius: 0;
            border: 0;
            outline: 1px solid #333;
        }

        label {
            @extend %ir;
        }

        input {
            width: 100%;
            height: 100%;
            padding: 10px;
            border: 0;
            box-sizing: border-box;
        }

        button {
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 100%;
            border: 0;
            background: $importantColor;
        }
    }

    .filterBox {
        padding: 10px;
        font-size: 0;
        background: #eee;

        label {
            z-index: 2;
            position: relative;
            display: inline-block;
            margin: 2px;
            font-size: 12px;
            border: 1px solid #ddd;
            background: #fff;

            input {
                @extend %ir;

                &:checked ~ span {
                    color: #fff;
                    background: $importantColor;
               ...

React

import React, { Component } from 'react';
import {render} from 'react-dom';

class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state={
            data: [
                {
                    complete: false,
                    important: 'a',
                    time: "2018.01.02",
                    text: "가나다라마바사아"
                },
                {
                    complete: false,
                    important: 'b',
                    time: "2018.01.12",
                    text: "ㅇㅇㅇㅇㅇ"
                },
                {
                    complete: true,
                    important: 'c',
                    time: "2018.03.10",
                    text: "쿠팡테스트완료"
                },
                {
                    complete: false,
                    important: 'a',
                    time: "2018.01.02",
                    text: "가나다라마바사아"
                },
                {
                    complete: false,
                    important: 'b',
                    time: "2018.01.12",
                    text: "ㅇㅇㅇㅇㅇ"
                },
                {
                    complete: true,
                    important: 'c',
                    time: "2018.03.10",
                    text: "쿠팡테스트완료"
                },
                {
                    complete: false,
                    important: 'a',
                    time: "2018.01.02",
                    text: "가나다라마바사아"
                },
                {
                    complete: false,
                    important: 'b',
                    time: "2018.01.12",
                    text: "ㅇㅇㅇㅇㅇ"
                },
                {
                    complete: true,
                    important: 'c',
                    time: "2018.03.10",
                    text: "쿠팡테스트완료"
                },
                {
                    complete: false,
                    important: 'a',
                    time:...