JSFiddle - React, Tailwind, and code Playground

HTML

<H2>Example 1</H2>
<ul class="block-list">
  <li>
    Foo
  </li>
  <li>
    <a href="#">Bar</a>
  </li>
  <li>
    <a href="#">Baz</a>
  </li>
</ul>


<H2>Example 2</H2>
<ul class="block-list-alt">
  <li>
    Foo
  </li>
  <li>
    Foo <a href="#">Bar</a> Baz
  </li>
  <li>
    <a href="#" class="block-list__link">Baz</a>
  </li>
</ul>

SCSS

/* Added to provide spacing around example. */
body{
  padding:5%;
}

// See readme here: https://gist.github.com/3947146

@mixin block-list($link-selector: 'a', $border-color: #ccc, $border-width: 1px, $item-padding: 0.75em) {
  border-top: $border-width solid $border-color;
  list-style: none;
  padding-left: 0;
  > li {
    border-bottom: $border-width solid $border-color;
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    padding: $item-padding;
    #{$link-selector} {
      display: block;
      padding: $item-padding;
      margin: -$item-padding;
    }
  }
}

// Standard usage
.block-list {
  @include block-list;
}

// Using a custom selector for a block link
.block-list-alt {
  @include block-list('.block-list__link');
}