JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Accordion with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div id="container">
            <section class="ac-container">
                <div>
                    <input id="ac-1" name="accordion-1" type="checkbox" checked />
                    <label for="ac-1">Label One</label>
                    <article>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius arcu lectus, sit amet tempus nibh. Integer quis eros sed dui varius luctus in non ipsum. Proin congue, nibh nec rhoncus fermentum, ipsum magna imperdiet libero, id viverra lorem nisi ac ante. Integer eu tortor ac nunc pulvinar fermentum vel vulputate enim. Curabitur id diam urna. Vestibulum venenatis malesuada mauris, rhoncus ullamcorper tortor dictum vel. Fusce luctus metus id felis ultricies lacinia. Praesent luctus varius augue, id consectetur eros iaculis sit amet. Fusce tempor dolor ut leo tempus sit amet ornare eros cursus. Nulla dui dolor, posuere vel vestibulum ac, sollicitudin sed enim. Mauris ac vestibulum enim. Vivamus nulla nulla, tincidunt ut elementum quis, posuere eget velit. Nullam placerat blandit cursus. </p>
                    </article>
                </div>
                
                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox" />
                    <label for="ac-2">Label Two</label>
                    <article>
                        <p>Vestibulum viverra, nisl in aliquet malesuada, ipsum tellus cursus nibh, et pellentesque lorem quam eu arcu. Vivamus ultricies gravida aliquam. Maecenas quis est lectus, in laoreet mi. Pellentesque eleifend...

CSS

body {
    background: #202024;
    color: #FFF;
    font: .75em Arial, Helvetica, sans-serif;
}
#container {
    width: 500px;
    margin: 0 auto;
}
#container label {
    font: 1.75em 'Oswald', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFF;
    padding: 5px 0;
    position: relative;
    z-index: 20;
    display: block;
    cursor: pointer;
    
    border-top: 1px dashed #C5B7A6; /* ------- Problem 1 ------- */
    
    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    -ms-transition: color 0.5s ease-in-out;
    transition: color 0.5s ease-in-out;
}
.ac-container label:first-of-type,
.ac-container label:first-child {
    border: none; /* ------- Problem 1 ------- */
}
.ac-container label:hover {color: #EF7C4D;}
.ac-container label:checked {
    color: #EF7C4D; /* ------- Problem 2 ------- */
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 0;
    top: 7px;
    background: transparent url(http://i.stack.imgur.com/l3caj.png) no-repeat center center;    
}
.ac-container input:checked + label:hover:after {background-image: url(http://i.stack.imgur.com/CnUMt.png);}
.ac-container input {display: none;}
.ac-container article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    
    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.ac-container article p {
    padding: 5px;
/*  opacity: 0; /* ------- Problem 3 ------- */
}
.ac-container input:checked ~ article {
    height: 150px; /* ------- Problem 4 ------- */
    
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition:...

JavaScript

Problem 1 - Each label should have a 1px dashed #C5B7A6 border-top, except the first one.
Problem 2 - Once a label is checked/opened, it needs to have the heading color of #EF7C4D.
Problem 3 - The text in each article should have an opacity of 0, then when opened, set to 1.
Problem 4 - Each article height should be automatically set, determined by the amount of content.