JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
    <div class="A">
        A
    </div>
    <div class="B">
        B
    </div>
    <div class="B">
        C
    </div>
    <div class="B">
        D
    </div>
</div>

CSS

#foo .B {
  margin:5px 0;
}
#foo .B:first-child {
  margin:40px 0 5px 0;
}
#foo .B:last-child {
  margin:5px 0 40px 0;
}